我的想法是我在HTML中看起来像这样
<h1> A title </h1>
<h2> Under title <h2>
<ul>
<li> something </li>
<li> something else </li>
<li> something third </li>
我希望这样做,以便当我将鼠标悬停在“某物”上时—该物品本身会产生悬停效果,并且“标题”中的文本会更改为“此标题”之类的其他文字?其他列表项也一样。
您将如何处理?我一直在搜索CSS和JS中的各种悬停状态。我现在猜测,它必须是某种JavaScript。
最佳答案
见working fiddle
对于<li>
的悬停效果
li:hover {
background-color: yellow;
}
对于标题更改:
$('ul').on({
mouseenter: function () {
$('h1').text('This title');
},
mouseleave: function () {
$('h1').text('A title');
}
});