Question

HTML和CSS的新手。我终于想出了如何将div悬停并导致在另一个div中显示文本。但是接下来发生的事情就是当我将文本出现时显示文本时显示文本;我不想要。

    <div class="leaf5">

    <img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">

    <div class="cashdup-info">

        <h3 class="cashdup-text"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>

    </div>

    </div>

有没有办法将名为“leaf5”的div悬停在另一个div中，如果我将文本包含在实际的div中，则显示文本而不显示文本。我的CSS如下：

.cashdup-text {
    font-weight: 100;
    font-size: 22px;
    display: none;    
}

.leaf5:hover .cashdup-text {
    display: block;        
}

感谢。

Answer 1

.leaf5:hover .cashdup-text:hover {
    visibility: hidden;
}

我不会在这里使用display: none，因为逻辑上display: none的元素不能处于悬停状态。

Answer 2

使用这种方式：

Demo

Demo for singlle image only

<强> CSS

div { display：none; }

img：hover + div { 显示：块; }

<强> HTML

 <img src="image/imh.pmg">
<div>Stuff shown on hover</div>

Answer 3

尝试将其添加到样式表中：

UIGraphicsGetCurrentContext

Answer 4

您面临的问题是当您将hover应用于leaf5 div时，会显示cashdup-text，然后会增加leaf5的区域，包括文本部分。这就是为什么当你显示文字时，你不能让它消失。因为你已经在盘旋了。

你可以这样尝试绝对位置：

CSS：

.cashdup-text {
    font-weight: 100;
    font-size: 22px;  
}
.cashdup-text{
  position: absolute;
  display: none;
}
.leaf5:hover .cashdup-text {
    display: block;
}

小提琴：https://jsfiddle.net/dqz9j2tj/

Answer 5

问题是，.cashdup-text是.leaf5的孩子，因此当您将鼠标悬停在.cashdup-text上时，浏览器会看到您还在.leaf5上空盘旋（在某种程度上）。

您是否愿意使用JS？如果是这样，请参阅下文。

var showme = document.getElementById("showme");
showme.style.display = "none";
function display() {
  showme.style.display = "block";
  }
function hide() {
  showme.style.display = "none";
  }

<div class="leaf5" onMouseOver="display();" onMouseOut="hide();">
    <img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
</div>
<div class="cashdup-info">
    <h3 class="cashdup-text" id="showme"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>

正如您所看到的，我已向您要显示/隐藏的id元素添加了h3“showme”并添加了MouseOver / MouseOut事件到.leaf5 div。我还将.leaf5与下面的div分开，只是因为它不会导致您在悬停在.cashdup-text上时所描述的任何问题。

悬停父div;在子div中显示文本。悬停子div时不显示文本

5 个答案: