0

I would like to show a hidden div "delete-button" contained within the div "post-wrap", when I hover over it (#post-wrap). How Can I do this with CSS?

Here is what I have done so far: http://jsfiddle.net/ksvrY/2/

#delete-button{
position: absolute;
right: 10px;
top: 10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
}
1

5 Answers 5

0

See: http://jsfiddle.net/ksvrY/4/

   #post-wrap:hover #delete-button{
        display:inherit;
    }

also hide the button:

#delete-button{
        display:none;
    }
0

This will work:

#post-wrap:hover #delete-button { 
     display:block;    
}

#delete-button { display:none; }

...and if you wanna get nice with it (append necessary vendor-prefixes as appropriate):

#post-wrap:hover #delete-button { 
     opacity:1;    
}

#delete-button { -webkit-transition:all 1s ease-in; opacity:0; }
0
#button-delete {display: none;}
#post-wrap:hover #button-delete {display: block;}

http://jsfiddle.net/ksvrY/5/

0

and its working now :)

the html

<div id="post-wrap">
    <div id="delete-button">
        <button id="button-delete"><p> Remove </p></button>
    </div>
</div>

the CSS

#post-wrap {
    position: relative;
    margin: 20px 0px 0px 20px;
    padding: 10px 10px 10px 10px;
    height: auto;
    min-height: 150px;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 4px 4px 4px 4px;
    background-color: #fff;
/*  box-shadow: rgba(0, 0, 0, 0.247059) 0px 3px 8px 0px; */
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px
}

#delete-button{
    position: absolute;
    right: 10px;
    top: 10px;
    margin: 0px 0px 0px 0px;
    height: 30px;
    width: 225px;
    overflow: auto;
}

#button-delete {
    cursor: pointer;
    float: right;
    height: 30px;
    width: auto;
    border: 1px solid #bbb;
    border-radius: 4px 4px 4px 4px;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
    display:none;
}

#button-delete p {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: calibri;
    font-weight: bold;
    font-size: 16px;
    color: #444;
}

#post-wrap:hover #button-delete{
    display:block;
}
0

use hover

http://jsfiddle.net/Ptxfy/

#post-wrap:hover #delete-button { 
     display:block;    
}

#delete-button { display:none; }

I would not use the direct child selector as it is not necessary and can lead to problems down the road.

4
  • I appreciate it isn't necessary (since it's an ID), but out of curiosity, what problems are you referring to? Jan 24, 2013 at 22:24
  • you could end up packing the button in a wrapper, or some js might do that and then it isnt a direct child anymore. Jan 24, 2013 at 22:27
  • Ah, from a maintainability stand point; thats fair. Considering that the CSS is using an ID, my rationale when writing it was: direct child with an ID wouldn't suffer from such a refactor. Jan 24, 2013 at 22:30
  • 1
    yes thats the rationale. Also some tribesman in the jungle might be viewing the website on IE6 and then it wont work ;) Jan 24, 2013 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.