Question

我正在使用基于表格的网站，并希望在悬停桌面内的图像时显示DIV。这是我的小提琴。

悬停时不显示Div。请解决。

我的HTML

<div id="Layer1" class="mydiv">
<strong><font color="#FFFFFF">This is image Descriptions.</font></strong>

我的CSS

.image:hover + .mydiv {
visibility: visible;}
#myimage:hover {
opacity: 1;
}
#myimage {
opacity: 0.4;
} 
.mydiv{
visibility: hidden; 
position:absolute; 
left:583px; 
top:318px; 
width:153px; 
height:192px; 
z-index:2; 
background-color: #CC3300; 
border: 2px solid #000000;"}

Answer 1

如果将隐藏的div放在父元素中，可以使用子选择器来完成。但在这种情况下，您需要显示图像，因此您必须将图像设置为父元素的背景图像。

<td height="275" align="center" class="image" 
    style="background-image: url(http://www.gratisography.com/pictures/122.jpg);">

    <div class="desc">
        Laborum fugiat legam tempor varias ad tamen mandaremus si exercitation
    </div>

</td>

.image {
    opacity: 0.4;
    background-size: cover;
    height:300px;
    width:300px;
    position:relative;
} 

.desc{
    opacity: 0;
    position:absolute;
    bottom:0px;
    font-size:12px;
    padding:10px;
    background:#fff;
    color:#333;
    visibility: hidden;
}

我将TD元素的位置设置为相对位置，以便＆＃39; desc＆＃39;子元素可以使用绝对定位将其放置在其父元素的底部。我还使用＆＃34; background-size：cover;＆＃34;以便我们使用的图像覆盖TD的整个背景。

.image:hover {
   opacity: 1;
}

.image:hover > .desc{
    opacity: 1;
    visibility: visible;
}

为图像（父级）添加悬停后，我们添加一个子选择器来设置内部元素的不透明度和可见性。使用不透明度，您可以执行css3过渡，以便您可以使视图转换看起来很好。如果将父元素的溢出设置为隐藏，则还可以使其从元素的底部进入视图。

http://jsfiddle.net/bv57r9bs/4/

Answer 2

您可以将div放在image之后，就像这样：

<img class="myimage" id="myimage" src="http://ia.media-imdb.com/images/M/MV5BMjE5MTQ3NjUyMV5BMl5BanBnXkFtZTcwMDA5MDE3Nw@@._V1_SX105_CR0,0,105,105_AL_.jpg" width="113" height="114">
<div id="mydiv" class="mydiv">
    <strong><font color="#FFFFFF">This is image Descriptions.</font></strong>
</div>

它会按你的意愿运作。
的 Check Demo

否则，只能使用纯CSS并且您必须使用Javascript和JQuery，因为CSS没有以前的选择器或父选择器或类似这样的事情。< / p>
注意：您的JSFiddle也有一些问题，您的图片类必须命名为myimage而不是image。

显示隐藏的Div，同时仅使用CSS悬停在Table内的图像

2 个答案: