僅當另一元素懸停時才更改元素的顏色

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; }

Answer 2

風格不是財產

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