CSS3 + 'display' toggle error in Chrome?

Question

For several months, I used the CSS3 + selector to apply CSS to certain elements.

Here is a demonstration of my use: http://jsfiddle.net/HB5Bz/2/

In IE and earlier versions of Chrome, when you hover over the edit menu, a menu will appear, but in the latest version of Chrome it is not the default. But when you switch the "display" manually using the "Elements" tab in dev tools, it works fine. Is this a bug with Chrome? Or did they introduce a new system for this?

Corresponding line:

#profile_feed_post_edit:hover + .profile_feed_post_edit_menu {
    display: block;
}

Answer 1

, display:hidden; display:block . , Chrome dev .

visibility:hidden visibility:visible ( ). Chrome . : - ,

Roko, , HTML-, display , , Chrome

Answer 2

:
:hover > (children) + (next sibling).

, ,

<grandparent>      // hover triggers 'parent' to show up

    <UI image>

    <parent>       // initially hidden, hover triggers HIDDEN to show up!
       <UI icon>
       <HIDDEN until PARENT is hovered>
    </parent>

</grandparent>

LIVE DEMO

<div class="feed_photo_portrait">  

  <img src="//placehold.it/150x110/cf5&text=IMAGE"> 
  <div class="edit">
    <img class="edit-ico" src="//placehold.it/50x50/f0f&text=EDIT" >
    <ul class="edit-options">
       <li><a href="#">Make Profile Picture</a></li>
       <li><a href="#">Delete This Photo</a></li>
    </ul>
  </div>

</div>

CSS

.feed_photo_portrait{
  background:#eee;
}
.edit{
  position:absolute;
  display:none;
  top: 20px;
  right: 10px;
}

.feed_photo_portrait:hover > .edit{
  display:block;
}

.edit-options{
  display:none;
  background:#fff;
  position: absolute;
  width: 115px;
  top: 12px;
  right: 8px;
}

/* Don't use .edit-ico for the hover but the common parent .edit */
.edit:hover > .edit-options{
  display:block;
}