Question

我正在尝试在按钮上创建工具提示。我编写了以下代码，它在鼠标悬停上给出了一个小圆圈，但它消失了原始圆圈。有没有什么方法可以在鼠标悬停时显示大圆圈并显示小圆圈？

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

Answer 1

解决方案：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;

}

Answer 2

最简单的解决方案。注意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;
}

以上是最简单的方法，但看到你将在工具提示中显示文字。这样的事情可能更合适。

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;
}

Answer 3

你的意思是这样的：http://jsfiddle.net/g3yW9/

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

如何在不隐藏原始元素的情况下为悬停元素添加CSS

3 个答案: