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. — user1425689
– user1425689, Commented Sep 11, 2015 at 17:05
validator.w3.org/nu/?doc=http%3A%2F%2Fchocobento.x10.mx%2Fwp%2F — j08691
– j08691, Commented Sep 11, 2015 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
– BSMP, Commented Sep 11, 2015 at 17:10

Shawn Erquhart · Accepted Answer · 2015-09-11 17:58:48Z

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, 2015 at 17:58

answered Sep 11, 2015 at 17:39

Shawn Erquhart

1,8582 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

コードバリノ Over a year ago

I can show you that as well then hold let me re-edit again.

コードバリノ Over a year ago

I added the HTML you wanted to see

コードバリノ Over a year ago

That actually worked sorta, only one li [list item] shows. Do I just add another li to make the other show?

コードバリノ Over a year ago

I found a away, I just added a second code version underneath looks the same but added another + li and it worked.

indubitablee · Accepted Answer · 2015-09-11 17:49:51Z

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, 2015 at 17:49

answered Sep 11, 2015 at 17:40

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

1 Comment

コードバリノ Over a year ago

I'm planning on putting links so hiding it would still allow them to be clicked.

score 0 · Accepted Answer · 2015-09-11 19:33:43Z

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, 2015 at 19:33

answered Sep 11, 2015 at 17:32

user4257136

6 Comments

コードバリノ Over a year ago

I edited the question, I want it to hide which is easy but on hover display itself.

コードバリノ Over a year ago

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.

user4257136 Over a year ago

go to fiddle.com and make a fiddle code.and send the link.

user4257136 Over a year ago

Do you want to hide that particular div while hover.or hide it permenantly after mouse hover.

コードバリノ Over a year ago

I want to make it appear when I hover over the img basically.

|

Collectives™ on Stack Overflow

Hiding Div with CSS not working?

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related