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