Question

我正在尝试创建一个css悬停效果，应该隐藏带有文本的div和圆圈上方的向下箭头，当我将悬停圆圈时，它们应该出现。

但我不能这样做。在我使用的代码下面。

当我将鼠标悬停在此圈子上时，上述两个div应该显示为

enter image description here

<head>
    <title>CSS Hovering Effect Practical Class</title>
    <style type="text/css">

        * {
        margin:0;
        padding:0;
        }

        #wrap {
        background:#4485F5;
        margin:10px 0;
        padding:30px;
        text-align:center;
        }

        h1 {
        color:#fff;
        letter-spacing:2px;
        font-size:50px;
        margin-bottom:15px;
        }

        p {
        color:#fff;
        background:#944E90;
        width:600px;
        font-size:25px;
        padding:3px;
        margin:auto;
        }

        span {
        font-style:italic;
        }

        #features {
        margin: 25px 0;
        }

        #baloon {
        color:#ddd;
        margin:auto;
        padding:15px;
        font-size:16px;
        letter-spacing:1px;
        background:url('bg.png') repeat;
        width:200px;
        position:relative;
        border-radius:5px;
        }

        #blackarrow {
        background:url('blackarrow.png') no-repeat top center;
        margin:auto;
        height:15px;
        width:15px;
        margin-top:-7px;
        }

        #circle {
        }

        #circle img{
        height:50px;
        width:50px;
        background:#fff;
        padding:50px;
        border:5px solid #00AEF0;
        border-radius:500px;
        transition:0.5s ease;
        }

        #circle img:hover {
        height:60px;
        width:60px;
        background:#ddd;
        padding:60px;
        border:8px solid #00AEF0;
        border-radius:500px;
        }

        #circle:hover > #baloon {
        display: inline;
        }

        #inner {
        }

        #img {}

    </style>
</head>

<body>
    <div id="wrap">
            <h1>Welcome to <span> CodeforBusiness</span> Site</h1>
            <p>Your trusted web designing service provider for a decade</p>
        <div id="features">
            <div id="baloon">Best web designing services with our team</div>
            <div id="blackarrow"></div>
            <div id="circle"><img src="avatar.gif" /></div>
        </div>
    </div>

</body>

Answer 1

使用你的标记它是不可能实现的，因为当前的css选择器不能仅通过一般兄弟组合器~或更有用的相邻兄弟组合子{{1}以非常有限的方式定位父母和兄弟姐妹的元素（See docs）。

您最好选择不同的嵌套结构，以使悬停效果有效。

现在，<div id="features"> <div id="circle"></div> <div id="description"> <div id="baloon">Best web designing services with our team</div> <div id="blackarrow"></div> </div> </div> div是您圈子后面的相邻兄弟，您可以通过#description定位它。（如果你有多个元素，你需要这个容器，如果它只是里面的一个+元素，你也可以直接定位它。）

#baloon

看看我的最小example。你只需要对定位进行一些修复就可以了。

Answer 2

正如@Chad所说，你已经构建了CSS，你实际上并没有在悬停时选择#balloon div。 >选择器是immediate child selector，因此为了使CSS按照您编写的方式工作，您的HTML必须如下所示：

<div id="wrap">
        <h1>Welcome to <span> CodeforBusiness</span> Site</h1>
        <p>Your trusted web designing service provider for a decade</p>
    <div id="features">
        <div id="blackarrow"></div>
        <div id="circle">
            <div id="baloon">Best web designing services with our team</div>
            <img src="avatar.gif" />
        </div>
    </div>
</div>

如果您对结构感到舒适，这是一个可行的解决方案。

您可以将#balloon样式更改为以下内容：

   #baloon {
        display:none;
        position:absolute;
        width:200px;
        top:-100px;
        left:50%;
        margin-left:-115px;
        padding:15px;
        font-size:16px;
        letter-spacing:1px;
        background:rgba(0, 0, 0, .5);
        border-radius:5px;
        color:#ddd;
    }

#circle＆amp; :hover风格：

    #circle {
        display:block;
        position:relative;
    }

    #circle:hover > #baloon {
        display: block;
    }

如果您需要帮助定位气球，请告诉我。

Here is a working jsfiddle

Answer 3

正如乍得的评论所说，“＆gt;”是子选择器。 Baloon需要在圆圈元素内。你想要的是兄弟选择器。 “+”表示相邻的兄弟（紧随其后），“〜”是一般的兄弟选择器，这可能是你想要的：

#circle:hover ~ #baloon

请注意，“baloon”必须在“标记中的圆圈之后出现，因此您需要重新编辑元素才能使其正常工作。”（首先放圆圈）。

CSS悬停效果显示另一个div

3 个答案: