How to show/hide delete button with CSS?


Tags: css

Problem :

<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?



Solution :

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.


    CSS Howto..

    How to fill an entire area in the body?

    How to change custom icon image on hover of the link next to it?

    How are CSS frameworks used?

    How to animate two divs in html / css to make a semi-circle transition?

    How to fill the width under an image with a caption without defining the width of the caption?

    How to change CSS of ng-view when triggering CSS in ng-include

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    how to edit the width of menu bar in dreamweaver

    how to find a class and apply a style with jquery?

    ExtJS how to remove grid row underline when selected and over

    How to properly serve CSS

    Weird CSS effect with box shadows - how to solve?

    How to make css background-image a fluid image work in IE

    Big Cartel - Slideshow Questions

    How to break a line after some certain width in css

    How to attach an element on the dynamically created div

    How do you right-align text into a column?

    How to center an image between two columns in CSS?

    How would you replicate these boxes in CSS?

    How to add an additional css class from code behind using ASP.NET?

    How to get table-row css and border property work together?

    how to align an 'a' element in html/css

    Html and CSS for emails, how to, where to?

    How to catch this nth-child() with css

    Bootstrap CDN + WP // How to edit '.css’

    how to place one div on top of another, when both are centered using auto margin?

    How to position an element relative to the background image width

    How do I apply a css padding to one element but not its child

    CSS how to align elements

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6