Hiding Div with CSS not working?

Question

So according to this Link

I should be able to hide a div with CSS and appear on hover but for some reason I'm not getting the same hover effect on the image I put it on which happens to be on the top corner of this Link

Any suggestion on why it might now be working?

Here's the CSS I used

.user-image {
  float:none !important;
  right: 0;
  margin-right: 4.5%;
  position: absolute;
  z-index: 100;
}

.user-image img {
  width: 65px !important;
  height: 65px !important;
  margin-top: -15px;
  border: 2px solid white;
  border-radius: 32px;
}

.user-image li {
  list-style: none;
  background-color: white;
  display: none;
  padding: 10px;
  width: 100px;
  margin-left: -35px; 
}

.user-image img:hover + .user-image li {
  display: block;
}

Here's the HTML

<div class="user-image">
<img src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo">
<li> Test </li>
<li> Test 2 </li>
</div>

Please include the HTML as well. And preferably with a fiddle or a snippet. — Roope, Sep 11 '15 at 17:05
https://validator.w3.org/nu/?doc=http%3A%2F%2Fchocobento.x10.mx%2Fwp%2F — j08691, Sep 11 '15 at 17:05
Flagging for: *Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**.* - Please [edit] your question to include enough code to reproduce the issue. — BSMP, Sep 11 '15 at 17:10

Shawn Erquhart · Accepted Answer · 2015-09-11T17:58:48.067

1

This won't work:

.user-image img:hover + .user-image li {
  display: block;
}

You're selecting any li that is a descendant of a .user-image, that is a sibling of an img:hover that is a descendant of a .user-image.

I can't give you an actual solution because we need to see the html that's being returned by your php tag, but if your img is inside of the li that's hidden, then you should hide/show when the li is hovered, not the img.

Update

Based on the html you provided, you just need to drop the second .user-image from your selector:

.user-image img:hover + li {
  display: block;
}

edited Sep 11 '15 at 17:58

answered Sep 11 '15 at 17:39

Shawn Erquhart

1,820
2
17
30

I can show you that as well then hold let me re-edit again. – コードバリノ Sep 11 '15 at 17:45
I added the HTML you wanted to see – コードバリノ Sep 11 '15 at 17:48
That actually worked sorta, only one li [list item] shows. Do I just add another li to make the other show? – コードバリノ Sep 12 '15 at 08:15
I found a away, I just added a second code version underneath looks the same but added another + li and it worked. – コードバリノ Sep 12 '15 at 08:19

indubitablee · Answer 2 · 2015-09-11T17:49:51.617

1

you can use opacity to accomplish this like the example below

.user-image {
    opacity: 0;
    background-color: red;
}
.user-image:hover {
    opacity: 1;
}

<div class="user-image">
    <a href="">Test hover thing here</a>
</div>

edited Sep 11 '15 at 17:49

answered Sep 11 '15 at 17:40

indubitablee

8,136
2
25
49

I'm planning on putting links so hiding it would still allow them to be clicked. – コードバリノ Sep 11 '15 at 17:47

score 0 · Answer 3 · 2015-09-11T19:33:43.337

0

Make some changes to your code something like this way

replace your code with this codes.

    <div class="user-image">
    <a><img  src="http://chocobento.x10.mx/wp/wp-content/uploads/2015/09/1-300x300.jpg" width="180" height="180" alt="itslino" class="avatar avatar-180 wp-user-avatar wp-user-avatar-180 alignnone photo"></a>
    <div class="user-image">
        <li> Test </li>
        <li>Test 2 </li>
    </div>

and style

a:hover + .user-image li  {
display: block;
}

CLICK HERE TO SEE YOUR CODE IN FIDDLE

Make adequate changes if necessary..

gud luck

edited Sep 11 '15 at 19:33

answered Sep 11 '15 at 17:32

I edited the question, I want it to hide which is easy but on hover display itself. – コードバリノ Sep 11 '15 at 17:35
The first link I added takes you to a stackoverflow example on how they made it work but despite me following the steps I can't replicate it. – コードバリノ Sep 11 '15 at 17:36
go to fiddle.com and make a fiddle code.and send the link. – Sep 11 '15 at 17:38
Do you want to hide that particular div while hover.or hide it permenantly after mouse hover. – Sep 11 '15 at 17:43
I want to make it appear when I hover over the img basically. – コードバリノ Sep 11 '15 at 17:46
Why would you use js? – Shawn Erquhart Sep 11 '15 at 17:59

Hiding Div with CSS not working?

3 Answers3