Home/ Questions/Q 642897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T21:13:26+00:00

Hello I have this list that i am working on. When i move the

  • 0

Hello I have this list that i am working on. When i move the mouse over a list item i want to change the border color of the list item to red, and when i move the mouse off, it should change back to white. Here is my html

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

Tis is my 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
        })




});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you have looks correct, unless you haven’t assigned a border width and style yet. In that case, there’s nothing to show the color.

    You could do this for example:

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

    Or set the initial border before you do the hover:

    $("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')
    })
    • 0