How to get this fixed image to display when hovering over a link?

Question

Not sure where i have gone wrong with this. I've tried this a few times, found posts online which show it working, but it doesn't for me.

I want to make it so that when I hover my mouse over any of the links below in the "li", it changes color of the link (this is working) and to display a image in the bottom left of the page with a fixed position.

The image is correctly position and works if I do display:block in the CSS for the image.

I currently have it set to none in the CSS for the images, and have it set to display: block in "a:hover > .image", however it doesn't work on hover.

<body>
<div class="everything">

    <div class="image"></div>

    <div class="box">
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
    </div>
</div>

Here is the CSS.

/*Change font and colors*/
:root {
    --bgcolor:  #FFFFFF;
    --linkcolor: #DCDCDC;
}

/*-----------------------------------------------------------*/

body {
    background-image: url('../background/1579515150563.jpg');
    background-color: #FFFFFF;
    background-size: cover;
}

.everything {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.link {
    display: inline-block;
    margin: 1%;
    height: 185px;
    width: auto;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--bgcolor);
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000000;
}

.box {
    width: 100vw;
}

ul {
    padding-inline-start: 0;
    list-style: none;
}

a {
    display: block;
    line-height: 2.4em;
    font-family: var(--font);
    color: var(--linkcolor);
    font-size: 1rem;
    text-decoration: none;
    outline: none;
    transition: .2s;
}

.image {
    content:url("../images/thumbs_up.png");
    height:200px;
    display: none;
    position: fixed;
    bottom:0px;
    left:0px;

}

a:hover > .image {
    display:block
}

a:hover {
    color: #7C7C7C;
}

I doubt you can have something like this, because `hover` has an effect for only `child` and its `siblings`. — Manjuboyz, Jun 07 '20 at 15:15

score 1 · Accepted Answer · answered Jun 07 '20 at 15:28

I believe the error resides in the selector. You are trying to select a nested child element (a), and then select an element adjacent to the parent element. This cannot be done with pure CSS as the name suggests, "Cascading Style Sheets" only supports styling in the cascading (down) direction, not up the hierarchy.

Refer to this: How to style the parent element when hovering a child element?

Instead, you can use jQuery/Javascript to achieve this same effect. JQuery example (I added a background of blue to the "image" element so you can see the results):

$(".link > ul > li > a").hover(function() {
  $(".image").addClass("displayblock");
}, function() {
  $(".image").removeClass("displayblock");
});

/*Change font and colors*/
:root {
    --bgcolor:  #FFFFFF;
    --linkcolor: #DCDCDC;
}

/*-----------------------------------------------------------*/

body {
    background-image: url('../background/1579515150563.jpg');
    background-color: #FFFFFF;
    background-size: cover;
}

.everything {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.link {
    display: inline-block;
    margin: 1%;
    height: 185px;
    width: auto;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--bgcolor);
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000000;
}

.box {
    width: 100vw;
}

ul {
    padding-inline-start: 0;
    list-style: none;
}

a {
    display: block;
    line-height: 2.4em;
    font-family: var(--font);
    color: var(--linkcolor);
    font-size: 1rem;
    text-decoration: none;
    outline: none;
    transition: .2s;
}

.image {
    content:url("../images/thumbs_up.png");
    height:200px;
    display: none;
    position: fixed;
    bottom:0px;
    left:0px;
    background: blue;

}

a:hover {
    color: #7C7C7C;
}

.displayblock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="everything">

    <div class="image"></div>

    <div class="box">
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
    </div>
</div>

Thanks for this, wasn't sure if there was any new things they added into CSS, since I haven't done web programming for a couple of years. Good opportunity for me to re-learn all of this. The Jquery helps, and thankfully I can understand it, eventhough I've never done it before. — Conspiracy, Jun 07 '20 at 17:03
No problem! Sorry, I could have explained that part a bit better. The general idea is to make a class that includes the hover effect you want (display: block), select the target hover element, add an event listener for on hover, and add the class to the links on hover and remove the class when not hovering. You can replicate this idea with pure Javascript as well if you don't want to use the jQuery library. (= Welcome back though! — Xenvi, Jun 07 '20 at 17:21

score 0 · Answer 2 · answered Jun 07 '20 at 15:35

As @Manjuboyz said hover only effect childs and its siblings. You have to use JS. The closest to pure HTML&CSS solution would be this one (but is just ugly and not recommended):

:root {
  --bgcolor: #FFFFFF;
  --linkcolor: #DCDCDC;
}


/*-----------------------------------------------------------*/

body {
  background-image: url('../background/1579515150563.jpg');
  background-color: #FFFFFF;
  background-size: cover;
}

.everything {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.link {
  display: inline-block;
  margin: 1%;
  height: 185px;
  width: auto;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  background-color: var(--bgcolor);
  border-radius: 8px;
  box-shadow: 2px 2px 8px #000000;
}

.box {
  width: 100vw;
}

ul {
  padding-inline-start: 0;
  list-style: none;
}

a {
  display: block;
  line-height: 2.4em;
  font-family: var(--font);
  color: var(--linkcolor);
  font-size: 1rem;
  text-decoration: none;
  outline: none;
  transition: .2s;
}

.image {
  content: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg");
  height: 200px;
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

a:hover>.image {
  display: block
}

a:hover {
  color: #7C7C7C;
}

<div class="everything">
  <div class="image" id="image"></div>
  <div class="box">
    <div class="link">
      <ul onmouseover="document.getElementById('image').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image2').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image2').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
  </div>
</div>

If you go for that option just use a function: onmouseover="myFunction()"

But is definitely worth to use jQuery or other library.

Hope it helps! Good luck!

Thanks for the help, I see what you mean its not very elegant with just HTML and CSS. Its been years since I last did any of this and with the current situation, thought I would do this and learn new things. I've solved it with one of the previous comments, using Jquery. — Conspiracy, Jun 07 '20 at 17:00

How to get this fixed image to display when hovering over a link?

2 Answers2