Hovering over an in a select list

问题

I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.

Relevant code:

Select chunk of form:

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

Manipulating selects (arrays defined earlier):

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

This all works. It all falls apart when I try to deal with hovering over options:

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

I found that code while searching through Stack Exchange, yet I am having no luck getting it to work. The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away. If I close out with the mouse a second alert window pops up. Just moving the mouse around the select occasionally results in an alert box popping up. I have tried targeting the options directly, but have had little success with that. How do I get the alert to pop up if I hover over an option?

Thanks for reading!

回答1:

You can use the mouseenter event.

And you do not have to use all this code to check if the element is an option.

Just use the .on() syntax to delegate to the select element.

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

Demo at http://jsfiddle.net/AjfE8/

回答2:

try with mouseover. Its working for me. Hover also working only when the focus comes out from the optionlist(like mouseout).

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

回答3:

You don't need to rap in in a function, I could never get it to work this way. When taking it out works perfect. Also used mouseover because hover is ran when leaving the target.

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})

Fiddle to see it working. Changed it to console so you don't get spammed with alerts. http://jsfiddle.net/HMDqb/

回答4:

That you want is to detect hover event on option element, not on select:

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})

回答5:

I have the same issue, but none of the solutions are working.

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});

Here my jsfiddle https://jsfiddle.net/ajg99wsm/

回答6:

I would recommend to go for a customized variant if you like to ease

capture hover events
change hover color
same behavior for "drop down" and "all items" view

plus you can have

resizeable list
individual switching between single selection and multiple selection mode
more individual css-ing
multiple lines for option items

Just have a look to the sample attached.

$(document).ready(function() {
  $('.custopt').addClass('liunsel');


  $(".custopt, .custcont").on("mouseover", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "block")
    } else {
      $(this).addClass("lihover");
    }
  })

  $(".custopt, .custcont").on("mouseout", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "none")
    } else {
      $(this).removeClass("lihover");
    }
  })

  $(".custopt").on("click", function(e) {
    $(".custopt").removeClass("lihover");
    if ($("#btsm").val() == "ssm") {
      //single select mode
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
      $(this).removeClass("liunsel");
      $(this).addClass("lisel");
    } else if ($("#btsm").val() == "msm") {
      //multiple select mode
      if ($(this).is(".lisel")) {
        $(this).addClass("liunsel");
        $(this).removeClass("lisel");
      } else {
        $(this).addClass("lisel");
        $(this).removeClass("liunsel");
      }
    }
    updCustHead();
  });

  $(".custbtn").on("click", function() {
    if ($(this).val() == "ssm") {
      $(this).val("msm");
      $(this).text("switch to single-select mode")
    } else {
      $(this).val("ssm");
      $(this).text("switch to multi-select mode")
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
    }
    updCustHead();
  });

  function updCustHead() {
    if ($("#btsm").val() == "ssm") {
      if ($(".lisel").length <= 0) {
        $("#hrnk").text("current selected option");
      } else {
        $("#hrnk").text($(".lisel").text());
      }
    } else {
      var numopt = +$(".lisel").length,
        allopt =  $(".custopt").length;
      $("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
    }
  }
});

body {
  text-align: center;
}

.lisel {
  background-color: yellow;
}

.liunsel {
  background-color: lightgray;
}

.lihover {
  background-color: coral;
}

.custopt {
  margin: .2em 0 .2em 0;
  padding: .1em .3em .1em .3em;
  text-align: left;
  font-size: .7em;
  border-radius: .4em;
}

.custlist,
.custhead {
  width: 100%;
  text-align: left;
  padding: .1em;
  border: LightSeaGreen solid .2em;
  border-radius: .4em;
  height: 4em;
  overflow-y: auto;
  resize: vertical;
  user-select: none;
}

.custlist {
  display: none;
  cursor: pointer;
}

.custhead {
  resize: none;
  height: 2.2em;
  font-size: .7em;
  padding: .1em .4em .1em .4em;
  margin-bottom: -.2em;
  width: 95%;
}

.custcont {
  width: 7em;
  padding: .5em 1em .6em .5em;
  /* border: blue solid .2em; */
  margin: 1em auto 1em auto;
}

.custbtn {
  font-size: .7em;
  width: 105%;
}

h3 {
  margin: 1em 0 .5em .3em;
  font-weight: bold;
  font-size: 1em;
}

ul {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>
  customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
  <div>
    <button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
  </div>
  <div id="hrnk" class="custhead">
    current selected option
  </div>
  <ul id="ranks" class="custlist">
    <li class="custopt">option one</li>
    <li class="custopt">option two</li>
    <li class="custopt">another third long option</li>
    <li class="custopt">another fourth long option</li>
  </ul>
</div>

来源：https://stackoverflow.com/questions/13262653/hovering-over-an-option-in-a-select-list

标签

javascript