Question

已经意识到你不能交换课程，除非它是兄弟姐妹。因此，不要把类放在一个新的div中，我试图将它放入同一个列表中，但是给它一个隐藏的类，然后在另一个li被徘徊时可见。

<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;
}

然而，这需要您以一个边际量重构您的标记，因此“前面的元素”规则正常工作 - 我们使用的选择器需要前面和目标元素共享同一个父母：

<强> 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.

我链接的小提琴是代码的非常简化版本，只是为了突出显示选择器工作而没有其他功能。

li类只能与css交换

1 个答案: