0

我想知道我如何无法在悬停时创建多悬停，例如当#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>
4

2 回答 2

1

托尼，

几天前您在此主题上的另一篇文章的相同答案仍然相同（如何在列表上进行多次悬停）。看起来确实只有一个纯 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 中的 hover 功能一步解决了 MouseEnter 和 MouseOut 功能。当鼠标悬停在指定元素上时，将遵循函数内部的条件。一旦鼠标离开元素，条件就会自动移除。快！

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

于 2013-09-30T20:59:10.213 回答
0

我只能回忆起这种行为或使用标签的类似行为（如果您不想要任何 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>
于 2013-09-30T23:42:34.643 回答