Question

正如标题所述，我的网页面临一些问题。我似乎无法通过css3显示/隐藏div，也无法弄清楚我做错了什么..我之前使用过这种方法，并且它已经完美无缺地工作了......

表格是否导致问题？这是我的HTML和CSS

<html>
<head>
<title>AMCON_website_home3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.hidden {

display:none;

}
#cambriapopup {

background-image:cambria-popup-background.gif;
width:125;
height:201;
z-index:10;
}

.show:hover + .hidden { 
display:block;

}

</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (AMCON_website_home3.psd) -->
<table id="Table_01" width="961" height="667" border="0" cellpadding="0"             cellspacing="0">
<tr>
    <td colspan="15">
        <img src="images/backgournd.gif" width="960" height="442" alt="">       </td>
    <td>
        <img src="images/spacer.gif" width="1" height="442" alt=""></td>
</tr>
<tr>
    <td colspan="9" rowspan="2">
        <img src="images/backgournd-03.gif" width="656" height="203"     alt=""></td>
    <td colspan="5">
        <div id="cambriapopup" class="hidden">WTF</div></td>
    <td rowspan="9">
        <img src="images/backgournd-05.gif" width="179" height="225"    alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="201" alt=""></td>
</tr>
<tr>
    <td rowspan="8">
        <img src="images/cambria-popup-background-06.gif" width="9"     height="24" alt=""></td>
    <div id="show" class="show"><td rowspan="8">
        <img src="images/AMCON_website_home3_06.gif" width="24" height="24"     id="show" alt=""></td></div>
    <td colspan="3" rowspan="2">
        <img src="images/cambria-popup-background-08.gif" width="92"     height="3" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
    <td colspan="5">
        <img src="images/backgournd-09.gif" width="57" height="1" alt="">      </td>
    <td rowspan="5">
        <img src="images/AMCON_website_home3_09.gif" width="20" height="18" alt=""></td>
    <td colspan="3" rowspan="3">
        <img src="images/backgournd-11.gif" width="579" height="3" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
    <td colspan="3">
        <img src="images/backgournd-12.gif" width="39" height="1" alt=""></td>
    <td rowspan="4">
        <img src="images/AMCON_website_home3_12.gif" width="17" height="17" alt=""></td>
    <td rowspan="6">
        <img src="images/backgournd-14.gif" width="1" height="21" alt=""></td>
    <td rowspan="6">
        <img src="images/cambria-popup-background-15.gif" width="5" height="21" alt=""></td>
    <td rowspan="5">
        <div class="show"><img src="images/AMCON_website_home3_15.gif" width="78" height="19" id="show" alt=""></div></td>
    <td rowspan="6">
        <img src="images/cambria-popup-background-17.gif" width="9" height="21" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
    <td rowspan="5">
        <img src="images/backgournd-18.gif" width="21" height="20" alt=""></td>
    <td rowspan="2">
        <img src="images/AMCON_website_home3_18.gif" width="15" height="15" alt=""></td>
    <td rowspan="5">
        <img src="images/backgournd-20.gif" width="3" height="20" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
    <td rowspan="4">
        <img src="images/backgournd-21.gif" width="3" height="19" alt=""></td>
    <td>
        <img src="images/AMCON_website_home3_21.gif" width="46" height="14" alt=""></td>
    <td rowspan="4">
        <img src="images/backgournd-23.gif" width="530" height="19" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
    <td rowspan="3">
        <img src="images/backgournd-24.gif" width="15" height="5" alt=""></td>
    <td rowspan="3">
        <img src="images/backgournd-25.gif" width="46" height="5" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
    <td rowspan="2">
        <img src="images/backgournd-26.gif" width="17" height="4" alt=""></td>
    <td rowspan="2">
        <img src="images/backgournd-27.gif" width="20" height="4" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
    <td>
        <img src="images/cambria-popup-background-28.gif" width="78"     height="2" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Answer 1

你的代码中有一些错误/坏习惯与悬停时div的隐藏/显示无关，例如给予元素样式属性如margin="10px"你应该给元素一个id或class（如果样式不止一次使用）并在样式表中设置样式

但是这Fiddle应该是你的样子寻找显示/隐藏div。
.hidden {
    display:none;
    height:200px;
    width:200px;
    background-color:#000;
}
.show:hover+.hidden, .hidden:hover {
    display:block;
}

<小时/>

修改

要实现您所寻找的目标，您需要使用javascript / jQuery，因为您已经设置了表格。这个Fiddle向您展示了如何使用jQuery执行此操作。将其包含在html的head标签中。

<script>
    $(".show").on("mouseover", function () {
        $(".hidden").show();
    });
    $(".show").on("mouseout", function () {
        $(".hidden").hide();
    }); 
</script>

你还需要链接到head标签中的jQuery库，所以在上面的代码之前添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

显示：无; display：阻止显示/隐藏表格中的div

1 个答案:

修改