Question

代码在这里：

＆＃13;

.contentGruop ul{
  margin:0;
  padding:0;
}
.contentGruop li {
  list-style: outside none none;
}
.contentGruop a{
  color:#fff;
}
.contentGruop{
  display:none;
}
h2{
  display:block;
}
h2:hover + .contentGruop {
  display: block;
}

＆＃13;

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
  <tr>
    <td>
      <h2><a href="#" class="AGreen">Sweater</a></h2>
      <p>The code business</p>
      <ul class="contentGruop">
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
        <li><a href="">Intimate-Attire</a></li>
      </ul>
    </td>
  </tr>
</table>

＆＃13;

它不起作用。如果有人知道我在哪里可以找到代码示例，或者可以指引我朝着正确的方向前进，我会非常感激!!

Answer 1

使用 ~ （General sibling selectors）代替 + （Adjacent sibling selectors）。

就像：

h2:hover ~ .contentGruop {
  display: block;
}

请看下面的代码段：

.contentGruop {
    margin:0;
    padding:0;
}
.contentGruop li {list-style: outside none none;}
.contentGruop a{color:#000;}
.contentGruop{display:none;}

h2{display:block;}

h2:hover ~ .contentGruop {display: block;}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
        <tr>
         <td>
            <h2><a href="#" class="AGreen">Sweater</a></h2>
            <p>The code business</p>
            <ul class="contentGruop">
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
            </ul>
        </td>
    </tr>
</table>

希望这有帮助！

Answer 2

替换并使用：

~（Adjacent sibling combinator）代替+（General sibling combinator）
display: none与visibility: hidden
display: block与visibility: visible

使用visibility代替display将解决跳跃问题。

display:none表示标签根本不会出现在页面上。在其他标签之间没有为其分配空间。

visibility:hidden表示与display:none不同，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

看看下面的代码

.contentGruop ul {
    margin:0;
    padding:0;
}

.contentGruop li {
  list-style: outside none none;
}

.contentGruop a {
  color:#000;
}

.contentGruop {
  visibility: hidden;
}

h2 {
  display:block;
}

h2:hover ~ .contentGruop {
  visibility: visible;
}

<table cellpadding="0" cellspacing="0" align="center" class="TblGreen">
        <tr>
         <td>
            <h2><a href="#" class="AGreen">Sweater</a></h2>
            <p>The code business</p>
            <ul class="contentGruop">
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
                <li><a href="">Intimate-Attire</a></li>
            </ul>
        </td>
    </tr>
</table>

希望这能完全帮助你。（y）的

Answer 3

您可以使用jquery -

执行此操作

int

我想保持ul li（）隐藏。当我将鼠标悬停在h2标签上时，将显示ul li a（）

3 个答案: