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

对于HTML和CSS来说很新颖。我终于想出了如何悬停一个div并使其在另一个div中显示文本。但是，当我将文字悬停在显示文本的div上时，会发生什么情况？我不想要。悬停父div;在子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显示文本显示出来，如果我将鼠标悬停实际格中的文本包含在我的CSS是如下：

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

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

谢谢。

来源

2016-02-26 cbevans001

尝试使用java脚本。 –

你可以给'.leaf5'一个预定的高度，或者绝对定位'.cashdup-text'吗？ – thykka

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

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

来源

2016-02-26 08:51:56 KWeiss

我应该使用不透明度：0和不透明度：1吗？ – cbevans001

可见性比不透明度具有更好的浏览器支持，除此之外您也可以使用。 – KWeiss

使用这种方式：

Demo

Demo for singlle image only

CSS

DIV { 显示：无; }

img：hover + div { display：block; }

HTML

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

来源

2016-02-26 08:57:41

但我没有使用锚标签。我所徘徊的是一张img，这是网页上的众多内容之一。我想徘徊的那个不是一个链接。 – cbevans001

然后usey 标记而不是标记它将工作。 –

这会导致所有的img标签显示文字，虽然他们是悬停在上面？ – cbevans001

尝试添加该到你的样式表：

.leaf5:hover .cashdup-text { 
    opacity:0;   
} 
.cashdup-text { 
    opacity:1;  
}

来源

2016-02-26 09:10:18

，当你申请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/

来源

2016-02-26 09:11:57 DebRaj

的问题是，.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>

正如你所看到的，我已经添加了 “SHOWME” 的id到要显示/隐藏并增加MouseOver/MouseOut事件到.leaf5 DIV的h3元素。我也将.leaf5从下面的div中分离出来，只是这样它不会像您在悬停在.cashdup-text上时所描述的那样引起任何问题。

来源

2016-02-26 09:17:32

我对JS知之甚少。尽管它在待办事项列表中。我如何去实现它到HTML中？ – cbevans001

@ cbevans001你的意思是，你如何将JS添加到网页？您可以将上面的JS添加到页面中的

11. Div不会显示在悬停上

12. jQuery在悬停时显示div - 在鼠标悬停时隐藏div

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

14. CSS3：当鼠标悬停在图像div上时显示隐藏文本div

15. 鼠标悬停时显示div

16. Tooltip Div未悬停时显示

17. 让鼠标悬停时显示Div

18. 在悬停时显示DIV，但悬停在另一个DIV上。随着CSS

19. jQuery的 - 当父DIV类被多次使用时，在悬停时显示DIV

20. 答：悬停 - > DIV不显示

21. css：当另一个div悬停时显示div

22. jQuery的显示DIV当其他DIV悬停，不工作

23. 将鼠标悬停在div上时显示文本修饰

24. 显示悬停中的现有div

25. 在JavaScript悬停上显示/隐藏div

26. 悬停图像 - 在其上显示div

27. 在悬停问题上显示div

28. 使用CSS类在悬停时显示和隐藏子div

29. 悬停在离子div

30. 如何在使用纯CSS悬停在DIV上时显示DIV？

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

回答

相关问题