Question

我想设置一个看起来很乱的导航菜单。单词是分开的，但是当你将鼠标悬停在一个单词上时，相应的单词都会变为不同的颜色，从而揭示疯狂的方法。我能够用html / css在一个方向上完成这个，但css是＆＃34;级联＆＃34;我不能让它反过来工作。这是我正在寻找的一个例子：

示例链接是 -

红场
蓝圈
绿色三角

我希望菜单看起来很乱 - 就像这样 -

红色蓝色方形绿色圆圈三角

徘徊在＆＃34; Red＆＃34;或＆＃34; Square＆＃34;将这两个链接更改为不同的颜色徘徊在＆＃34; Blue＆＃34;或＆＃34; Circle＆＃34;改变它们等......

所以我的菜单html看起来像 -

＆＃13;

<ul>
<li><a href="/link1" class="one">Red</a></li>
<li><a href="/link2" class="two">Blue</a></li>
<li><a href="/link1" class="one">Square</a></li>
<li><a href="/link3" class="three">Green</a></li>
<li><a href="/link2" class="two">Circle</a></li>
<li><a href="/link3" class="three">Triangle</a></li>
</ul>

＆＃13;

我认为这可以通过jquery轻松完成，但需要一些帮助。

感谢。

Answer 1

使用addEventListener和mouseover事件

，这是一种非常简单的方法

它将hovered元素类设置为ul，然后只需将类ul.one .one

配对

＆＃13;

document.querySelector('ul').addEventListener('mouseover', function(e) {
  this.className = e.target.className;
})

＆＃13;

ul.one .one {
  color: red;
}
ul.two .two {
  color: yellow;
}
ul.three .three {
  color: green;
}

＆＃13;

<ul>
  <li><a href="/link1" class="one">Red</a></li>
  <li><a href="/link2" class="two">Blue</a></li>
  <li><a href="/link1" class="one">Square</a></li>
  <li><a href="/link3" class="three">Green</a></li>
  <li><a href="/link2" class="two">Circle</a></li>
  <li><a href="/link3" class="three">Triangle</a></li>
</ul>

＆＃13;

Answer 2

使用jQuery。

https://jsfiddle.net/cofr7498/

$(".one").mouseover(function(){
  $(".one").css("color", "red");
});
$(".one").mouseout(function(){
  $(".one").css("color", "blue");
});
$(".two").mouseover(function(){
  $(".two").css("color", "red");
});
$(".two").mouseout(function(){
  $(".two").css("color", "blue");
});
$(".three").mouseover(function(){
  $(".three").css("color", "red");
});
$(".three").mouseout(function(){
  $(".three").css("color", "blue");
});

li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="/link1" class="one">Red</a></li>
  <li><a href="/link2" class="two">Blue</a></li>
  <li><a href="/link1" class="one">Square</a></li>
  <li><a href="/link3" class="three">Green</a></li>
  <li><a href="/link2" class="two">Circle</a></li>
  <li><a href="/link3" class="three">Triangle</a></li>
</ul>

一次悬停多个元素，向后兼容

2 个答案: