Question

当我将鼠标悬停在元素上时，我有一个“空”div，我想填充文字。对于我们悬停在其上的每个元素，文本应该是不同的。

这是code

.text-info{
  height: 50px;
  width: 200px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.economics{
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.economics:hover{
  background-color: grey
}
.workforce{
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.workforce:hover{
  background-color: grey
}

#economics, #workforce{
  display: none;
}

<div class="text-info">
  <p id="economics">blabla</p>
  <p id="workforce">blablabla</p>
</div>
<div class="economics"></div>
<div class="workforce"></div>

我只尝试过使用css，将p设置为显示：将鼠标悬停在.economics或.workforce上时没有结果。

非常感谢任何帮助，谢谢！

Answer 1

使用css，您只能在悬停其父元素时显示元素，如下所示：

.economics:hover #economics{
    display: block;
}

如果#economics位于.economics内，这将有效。

在这种情况下，您可以在#economics中添加绝对位置，直观地显示在.text-info中。

Answer 2

<pre>
p {
    margin: 0px;
}
.economics {
    height: 100px;
    width: 100px;
    border: 2px solid black;
    display: table;
    vertical-align: middle;
}
.economics p:hover {
    background-color: grey;
    display: table;
    height: calc(100% - 0em);
    width: 100%;
    vertical-align: middle;
}
.workforce {
    height: 100px;
    width: 100px;
    border: 2px solid black;
    display: table;
    vertical-align: middle;
}
.workforce p:hover {
    background-color: grey;
    display: table;
    height: calc(100% - 0em);
    width: 100%;
    vertical-align: middle;
}
</pre>

Answer 3

为了涵盖其他基础，你可以使用一些简单的jQuery来解决这个问题。使用.hover（）方法。

         <script type="text/javascript">
             $(".workforce").hover(function() {
                 $(".text-info").html("The workforce is amazing.");
             }, function() {
                 $(".text-info").html("");
             });

             $(".economics").hover(function() {
                 $(".text-info").html("I love the economy.");
             }, function() {
                $(".text-info").html("");
             });

         </script>

将它放在<body>的底部，它应该有效。

检查：https://jsfiddle.net/tww259xe/

Answer 4

如果你真的需要纯CSS解决方案，那么给定标记的唯一真正选项就是~通用兄弟选择器。需要注意的是兄弟必须跟随主选择器，所以你必须重新排序你的div。 CSS看起来像这样：

.workforce:hover ~ .text-info #workforce {
  display: block;
}
.economics:hover ~ .text-info #economics {
  display
}

请参阅fiddle

当鼠标悬停在另一个div上时，使文本显示在div中

4 个答案: