javascript - li类只能和css互换吗

Question

被告知你不能交换类(class)，除非它是 sibling 。因此，我没有将类放入新的 div 中，而是尝试将其放入同一个列表中，而是给它一个隐藏的类，然后在悬停另一个 li 时可见。

http://jsfiddle.net/e79g4p1p/13/

<div class="bodyfooter_block bbshadowb">
    <p class="typotitle_sml"><?php echo $var_furtherinfotitle; ?></p>
    <p class="typosubtitle_sml"><?php echo $var_furtherinfoheading; ?></p>
    <p class="typotext" style="padding-top:16px;"> 
    <ul class="blocklist">
        <li><a href="" class="hover_text1">text hidden</a></li>
        <li><a href="">text</a></li>
        <li><a href="">yugiugugu</a></li>
        <li><a href="">ugiugguiug</a></li>
        <li><a href="">ygguiguig</a></li>
        <li><a href="">uihoihoihoih</a></li>
        <li><a href="">uhgiuhiuhuh</a></li>
        <p>po</p>
        <li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
    </ul>
    </p>
</div>  

CSS

.hover_text1 {
}

.bodyfooter_text1 {
    list-style-type: none;
    visibility: hidden;
}

.hover_text1:hover > #bodyfooter_text1 {
    list-style-type: none;
    width:260px; 
    height:102px; 
    background: #222222;
    color: #CCCCCC;
    padding:12px; 
    padding-top:6px; 
    border-radius: 6px;
    visibility: visible;
}

尝试使用 js 但不起作用:

$("#hover_text1").hover(function() {
    $(".bodyfooter_text1").addClass("bodyfooter_text1_hover");
});

http://jsfiddle.net/e79g4p1p/23/

Answer 1

我强烈建议您查看 basics of CSS再一次。

您面临的问题可以使用纯 CSS 来解决 - 我们需要一个名为 General Sibling Combinator 的选择器:

CSS

.hover_text1:hover ~ #bodyfooter_text1 {
    display: block;
}

但是，这需要您通过边际量来重组您的标记，因此 “前面有元素” 规则可以正常工作 - 我们使用的选择器需要共享前面的元素和目标元素同一个 parent :

HTML

<ul class="blocklist">
    <li class="hover_text1"><a href="">text hidden</a></li>
    <li><a href="">text</a></li>
    <!-- ... -->

    <li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>

Working example on JSFiddle.

我链接的 fiddle 是您代码的一个非常的简化版本，修改只是为了突出显示选择器的工作，没有别的。