Question

我有一个页面有2列。左栏是一张图片。

<div class="col-md-3">
    <br>
    <img src="http://placehold.it/350X350" class="img-responsive">
</div>
<div class="col-md-3">
    <br>Lorem ipsum dolor sit amet..
</div>

我想将图片置于图片后面，只有当有人将鼠标放在桌子的区域时，我才需要将其显示为。默认情况下，我想在悬停时放置图像并放置表格（见下文）：

<div class="col-md-3"> <br> <table class="table"> <caption>Basic Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </div> <div class="col-md-3"> <br>Lorem ipsum dolor sit amet..</div>

所以，在悬停时：http://www.bootply.com/FmxIhVK0Pq 默认情况下：http://www.bootply.com/jS76schLTB

Answer 1

我会absolute定位图片并在悬停时opacity: 0; .the_image{ position:absolute; top:0;left:0px; } .the_image:hover { opacity: 0; }

.the_image{
  position:absolute;
  top:0;left:0px;
}
.the_image:hover {
    opacity: 0;
}

绝对位置将允许表格位于图像下方。所以它不会显示两者。

＆＃13;

<table class="table"> <caption>Basic Table Layout</caption> <thead> <tr> <th>Name</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td>
</tr> </tbody> </table>

<img src="http://placehold.it/350X350" class="the_image">

＆＃13;

display:none;

＆＃13;

另一种解决方案是默认使用表格display:block;，当您悬停图片时，将其更改为display:none;并将图片更改回{{1}}

编辑：删除了 SECOND 解决方案的代码，因为它使图像闪烁，如果想法可行，那么拥有比我更多CSS知识的人可以添加代码:) （请参阅下面的nepeo评论！）

example here

Answer 2

我不确定我是否做对了。但如果我这样做可能最好的方法是使用css选择器。所以，例如，你给它们绝对位置或类似的东西，以便表格在图片后面（z-index小于表格）。并使用像img：hover {display：none;}这样的伪选择器甚至更好的img：hover {opacity：0;}，这个你可以使用css过渡，也可以添加比图像更小的z-index，这样用户就可以选择表中的东西

如何在悬停时更改页面上的元素？

2 个答案: