How to show/hide delete button with CSS?

<div class="container">
    <div class="Xbutton">
    </div>
</div>

/*THE CSS*/
.Xbutton { display:none; }
.Xbutton:hover { display:inline-block; }

How can I set "display:inline-block" to "Xbutton" when someone hovers "container"开发者_开发百科 in CSS only?

Try

<div class="container">
    <div class="Xbutton">
    </div>
</div>

/*THE CSS*/
.Xbutton { display:none; }
.container:hover .Xbutton { display:inline-block; }

This solution will not work in IE6, and might be buggy in IE7.

The problem is that you cannot hover an element that isn't showing.

Check Why isn't css visibility working