CODEWITHSUNDEEP
htmlcss
Conspiracy
Conspiracy

Reputation: 15

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

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;
}

Upvotes: 0

Views: 47

Answers (2)

Humble Cucumber
Humble Cucumber

Reputation: 450

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!

Upvotes: 0

Xenvi
Xenvi

Reputation: 887

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>

Upvotes: 1

Related Questions