How to add CSS for hover element without hiding the original element

Question

I am trying to create a tool tip on my buttons. I have written the following code, it gives a little circle on mouse hover, but it disappears the original circle. Is there any way that I can hold the big Circle on mouse hover and display the little circle?

<style>

    #item
    {
        background-color: red;
        border-radius:50%;
        width:100px;
        height:100px;
        position:absolute;
        top:50px;

        }

    #item:hover
    {
        background-color:black;
        width:30px;
        height:30px;
        border-radius:50%;
        position:relative;
        top:0px;    

        }   


</style>

</head>

<body>

<div id ="item">

</div>

</body>

Yes, you could do this with a pseudoelement.

Patrick Fisher
– Patrick Fisher

2014-06-18 05:17:43 +00:00
Commented Jun 18, 2014 at 5:17 — Patrick Fisher
– Patrick Fisher, Commented Jun 18, 2014 at 5:17

Suraj Rawat · Accepted Answer · 2014-06-18 05:22:03Z

3

Solution : solution is here

html

<div id ="item">
   <div id ="item2">
   </div>
</div>

css

#item
{
    background-color: red;
    border-radius:50%;
    width:100px;
    height:100px;
    position:absolute;
    top:50px;

    }

#item2
{
    background-color:black;
    width:30px;
    height:30px;
    border-radius:50%;
    position:relative;
display:none;
    top:0px;    

    }   
 #item:hover > #item2
{
    display:block;

}

answered Jun 18, 2014 at 5:22

Suraj Rawat

3,76326 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amin Jafari · Accepted Answer · 2014-06-18 05:25:12Z

3

do you mean like this: http://jsfiddle.net/g3yW9/

$(function(){
    $('#item').hover(function(){
        $('#tooltip').fadeIn(200);
    },function(){
        $('#tooltip').fadeOut(200);
    });
});

answered Jun 18, 2014 at 5:25

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Comments

misterManSam · Accepted Answer · 2014-06-18 05:37:39Z

Simplest solution. Watch out for browser compatibility

Have a fiddle!

HTML

<div id ="item">

</div>

CSS

#item {
    background-color: red;
    border-radius:50%;
    width:100px;
    height:100px;
    top:50px;
}
#item:hover:after {
    content:"";
    position:absolute;
    background-color:black;
    width:30px;
    height:30px;
    border-radius:50%;
    display: block;
    margin: -10px 0 0 -10px;
}

Above is the simplest way, but seeing as you will display text in your tooltip. Something like this may be more appropriate.

Fiddle for this!

HTML

<div id="item">
    <div>This is my tooltip</div>
</div>

CSS

#item {
    background-color: red;
    border-radius:50%;
    width:100px;
    height:100px;
    position: relative;
}
#item div {
    display: none;
}
#item:hover div {
    position:absolute;
    display: block;
    bottom: -40px;
    right: -50px;
}

Collectives™ on Stack Overflow

How to add CSS for hover element without hiding the original element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related