The jQuery .mouseenter() method allows you to start other actions when the user places the cursor on the specified object. This is similar to the :hover with CSS.

There are several methods associated with mouse movements with jQuery API: .mousedown(), .mouseenter(), .mouseleave(), .mousemove(), .mouseout(), .mouseover() and .mouseup().

$("#treeType li").mouseenter(function(){
    $("#treeType li").css("background-color","#444444");
    var variety = $(this).html();
    var imgSrc = "'images/" + variety + ".jpg'";
    $(this).css({"background-color":"#009929", "color": "#ffffff"});
    $("#treeBox").html("<img src="/ + imgSrc + "/>");

The script shown above sets up a series of things to happen triggered by the mouseenter event.

  • When the visitor places the cursor on an <li> tag inside of the <ul id="treeType"> element, the .mouseenter() function is started.
  • A reset occurs for all of the <li> tags, so any previous .mouseenter() event is brought back to the beginnning state of all boxes being grey.
  • The content of the <li> tag is collected with the .html() method and the is assigned to the variable variety.
  • The variety variable is added to some other text for the variable imgSrc.
  • The script uses the variable imgSrc to populate the HTML inside the <div id="treeBox"> to display a different image for each <li> that receives the mouseenter event. 
  • The <li> that received the action changes the background color to a green color. 

Some of this code could have been dealt with in a different way if there had also been a .mouseleave() event. Additionally, the code could have been shortened by combining some of the steps into a single step, but we wanted to illustrate each separate action for a better understanding of what is going on.

<ul id="treeType">
<div id="treeBox"></div>

The result: