當鼠標移動到列表項上時，在JQuery中使用懸停

您好，我有我正在處理的這個列表。當我將鼠標移動到列表項目上時，我想將列表項目的邊框顏色更改爲紅色，當我將鼠標移開時，它應該變回白色。這裏是我的html當鼠標移動到列表項上時，在JQuery中使用懸停

<html> 
    <head> 
    <title>JQuery Problem 1</title> 
    <script type="text/javascript" src="jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="problem1.js"></script> 
    </head> 
    <body> 
    <ol> 
     <li>Comp 250 
     <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>CGI</li> 
      <li>PHP</li> 
      <li>JavaScript</li> 
     </ul> 
     </li> 
     <li>Comp 345 
     <ul> 
      <li>Objects and classes</li> 
      <li>Static and constant members</li> 
      <li>Operator overloading</li> 
      <li>Templates</li> 
      <li>Inheritance</li> 
      <li>Polymorphism</li> 
     </ul> 
     </li> 
     <li>Comp 431 
     <ul> 
      <li>Perl language</li> 
      <li>File uploads and downloads</li> 
      <li>AJAX and JSON</li> 
      <li>Java Servlets</li> 
      <li>JSP</li> 
     </ul> 
     </li> 
    </ol> 
    </body> 
</html>

提斯是我的jQuery

$(document).ready(function() 
{ 


    $("ol > li").css({margin: "1em", fontWeight: "bold"}); 
    $("ol li li").css({fontWeight: "normal"}); 


    $("li").hover(function() 
     { 
      $(this).css('border-color', 'red');   //switches color when on 
     }, 
     function() 
     { 
      $(this).css('border-color', 'white')   //switches back when the mouse moves off 
     }) 




});

來源

2010-02-28 Zerobu

問題是什麼？你的代碼看起來很好。 – Joel 2010-02-28 03:55:06

懸停，不起作用 – Zerobu 2010-02-28 03:56:47

你有什麼看起來是正確的，除非你沒有指定邊框寬度和樣式呢。在那種情況下，沒有什麼可以顯示顏色的。

例如，你可以這樣做：

$("li").hover(function() 
     { 
      $(this).css('border', '1px solid red'); 
     }, 
     function() 
     { 
      $(this).css('border', '1px solid white') 
     });

或者設置初始邊界你做的懸停之前：

$("ol > li").css({borderWidth:"1px", borderStyle:"solid", margin: "1em", fontWeight: "bold"}); 
$("ol li li").css({fontWeight: "normal"}); 

$("li").hover(function() 
    { 
     $(this).css('border-color', 'red'); 
    }, 
    function() 
    { 
     $(this).css('border-color', 'white') 
    })

來源

2010-02-28 03:56:51 user113716

當鼠標移動到列表項上時，在JQuery中使用懸停

回答

相關問題