javascript - 仅当另一个元素悬停时才更改元素的颜色

Question

你好，我有一个包含 5 个 p 元素的列表，它们有蓝绿色背景，我想要那个 当我悬停第二个元素时，第二个元素和第四个元素会将文本颜色更改为橙​​色。并在第二个未悬停时返回正常颜色。

<p id="t1"> test 1 </p>
<p id="t2"> test 2 </p>
<p id="t3"> test 3 </p>
<p id="t4"> test 4 </p>
<p id="t5"> test 5 </p>

p {
    background-color: teal;
    width: 100px;
}

p#t1:hover {
  color: yellow;
}


$(document).ready(
  function() {
    $("p#t2").hover(
      function() {
        $("p#t2").style("color", "orange");
        $("p#t4").style("color", "orange");
      },
      function() {
        $("p#t2").style("color", "black");
        $("p#t4").style("color", "black");
      }
    );
  });

http://codepen.io/anon/pen/jPOgPG

这是我的代码... 怎么了？

Answer 1

style 是一个 DOM 函数。你想要 jQuery 的 css()。

此外，对于悬停在其上的元素，您可以为该颜色创建一个 css :hover 类，以将 jQuery 简化为其他元素。

p#t2:hover { color:black; }