[英]Hide div when hovering another div
so i have a few divs inside divs like this: 所以我在div内有几个div像这样:
<div class="flip-container">
<div class="flipper">
<a href="#" data-reveal-id="pc1">
<div class="inner" style="background-color:#ea6524;">
<p class="text">title</p>
<img src="1.png" class="img" />
</div>
</a>
</div>
</div>
DESCRIPTION: now the flip-container and the flipper are used because when i hover this div i have a css transition triggered which flips the div. 说明:现在使用了翻转容器和翻转器,因为当我将鼠标悬停在此div上时,会触发一个css转换来翻转div。 the href simply allows to open a div with a description when the inner div is clicked the inner div is a square with inside a text and an image. 当单击内部div时,href只是允许打开一个带说明的div。内部div是一个带有文本和图像的正方形。
WHAT I WANT TO DO: i would like to hide the text "title" and the img "1.png" when i hover the flip-container. 我想做什么:当我将鼠标悬停在翻转式容器上时,我想隐藏文本“ title”和img“ 1.png”。
how can i do this? 我怎样才能做到这一点?
i tried to add display:hidden to the class text but it works only when i hover the actual text and not when i hover the flip-container background. 我试图将display:hidden添加到类文本中,但仅当我将鼠标悬停在实际文本上时才起作用,而当我将翻转容器背景悬停时则不起作用。
thanks for the help 谢谢您的帮助
i would prefer a pure css solution if possible, if not also a javascript solution could do. 如果可能的话,我宁愿使用纯CSS解决方案,如果不能,那么javascript解决方案也可以。
This should do the trick: 这应该可以解决问题:
.flip-container:hover .text, .flip-container:hover img {
display: none;
}
Alternatively, you could use visibility: hidden
as this will keep the elements in the document flow, rather than removing them all together. 或者,您可以使用visibility: hidden
因为这将使文档中的元素保持流动,而不是一起删除它们。
OP, OP,
In this case, I'd suggest visibility:hidden
over display:none;
在这种情况下,我建议您进行visibility:hidden
于display:none;
. 。 Here's a fiddle with this approach: http://jsfiddle.net/wEr3T/1/ . 这是使用这种方法的小提琴: http : //jsfiddle.net/wEr3T/1/ 。
In short, visibility:hidden
will literally just hide the element(s)—still taking up the space it did before, thus not affecting the layout. 简而言之,“ visibility:hidden
实际上只会隐藏元素,而仍会占用之前的空间,因此不会影响布局。
In contrast, display:none;
相反, display:none;
causes it not to be rendered, thus the space it had previously occupied is now unaccounted for. 导致无法渲染,因此以前占用的空间现在无法计算。 As such, hovering to show/hide elements that have been set to display:none
will likely cause some undesired flickering. 因此,将鼠标悬停在显示/隐藏已设置为display:none
元素上可能会导致一些不希望的闪烁。
hiding the text and the image when hovering #flip-container
by setting display: none
may cause flashing and change in layout of the parent container. 通过设置display: none
鼠标悬停在#flip-container
时隐藏文本和图像display: none
可能会导致闪烁并更改父容器的布局。 so instead make them transparent by set visibility: hidden
. 因此,而是通过设置visibility: hidden
使它们透明。
.flip-container:hover img {
visibility:hidden
}
.flip-container:hover .text {
visibility:hidden
}
Try this... 尝试这个...
.flip-container:hover .text, .flip-container:hover img { visibility: hidden; }
<div class="flip-container"> <div class="flipper"> <a href="#" data-reveal-id="pc1"> <div class="inner" style="background-color:yellow;"> <p class="text" style="color:red">title</p> <img src="//placehold.it/100x100" class="img" /> </div> </a> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.