Question

我想知道我怎么不能在悬停时创建一个多悬停，例如当#a悬停时如何让#b改变颜色？只使用html和css。顺便说一句#a是一个方框或图像

这是HTML：

<div id="showwrap">
    <div id="leftbox">
        <ul>
            <li id="a"> <a href=""></a></li>
        </ul>
    </div>
    <div id="rightbox">
        <ul>
            <li id="b"> <a href="">Firstname Lastname</a></li>
        </ul>
    </div>
</div>

Answer 1

托尼，

你几天前关于这个主题的另一篇文章的答案仍然是相同的（How To Do Multiple Hover On List）。看起来确实有一个纯CSS答案，但jQuery选项要简单得多。

您是否有理由不愿意/不能使用jQuery或JavaScript？这种情况是JavaScript使用的原因之一。我会密切关注这一点，听听是否有人采用纯CSS / HTML方式来做到这一点。与此同时，您可以通过以下方式使用jQuery或JavaScript实现此目的：

1。）创建一个CSS类，它在将鼠标悬停在#a上时具有所需的属性。

2。）在关联的JavaScript文件（或HTML文档的头部）中包含以下jQuery代码。

$(function() {
    $("#a").hover(function() {
        $(this).addClass("hoverClass");
        $("#b").addClass("hoverClass"); 
    });
});

jQuery中的悬停功能只需一步即可解决MouseEnter和MouseOut功能。当鼠标悬停在指定元素上时，将遵循函数内部的条件。鼠标离开元素后，将自动删除条件。的Presto！

注意：虽然我不建议使用内联JavaScript，但如果您不使用jQuery的原因是由于无法拥有外部JavaScript文件，则可以在HTML文件中完成此操作。只需在JavaScript脚本代码之间的标头中包含我的第二点中列出的代码段。

Answer 2

我只记得这种行为或使用标签的类似行为（如果你不想要任何javascript），但这不适用于所有浏览器，最重要的是，你会使用HTML来做行为事情和不应该是意思。

小提琴：http://jsfiddle.net/hLtSG/

CSS

#b:hover, #bc:hover{
   color: red;
   font-weight: bold;
    border: solid 1px black;
}

HTML

<div id="showwrap">
    <div id="leftbox"><label for="b"><img src="YOUR_IMAGE" /></label>
    </div>
    <div id="rightbox">
        <ul>
            <li> <input id="b" name="b" value="Firstname Lastname" /></li>
            <li> <a id="bc" name="bc">Firstname Lastname</a></li>
        </ul>
    </div>
</div>

如何在悬停时选择多个元素

2 个答案: