这是我的代码。我做了这个 - 当我悬停表格单元格然后它的背景图像发生变化时,这很容易。 但是我想做到这一点,当我在第一个表中将单元格 5 悬停在 class="down"上时,第二个表的显示属性从无变为阻止 我搜索了这个,最后得到了所有这些代码,但它不起作用。 我需要使用没有 JavaScript 的纯 CSS。 问题出在哪里,我做错了什么?
HTML
<table border="0" class="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="down">5</td>
</tr>
</table>
<table border="0" class="table2">
<tr>
<td>row2</td>
</tr>
<tr>
<td>row3</td>
</tr>
</table>
CSS
.table
{
left:200px;
position:absolute;
}
td
{
background-image:url(poga1.png);
height:70px;
width:100px;
}
td:hover
{
-webkit-transition:1s;
background-image:url(poga2.png);
}
.table2
{
display:none;
left:616px;
position:absolute;
top:77px;
}
.down:hover .table2
{
display:block;
}
最佳答案
除非 Table2 是 Table1 的子项,否则您无法使用 CSS 真正做到这一点。它可以很容易地用 JavaScript 完成(在这个例子中是 jQuery)。在这里查看我的示例:
$(document).ready(function() {
$(".down").mouseover(function(){
$(".table2").show();
});
$(".down").mouseout(function(){
$(".table2").hide();
});
});
这是在悬停时隐藏/显示的代码块。我冒昧地更新了您的源代码,以便更容易查看。
更新:如果您绝对肯定地必须在没有 JavaScript 的情况下完成此操作,那么仅使用 CSS 和 HTML 会如何:
关于html - Css 悬停不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16111955/