We Keep Coding

Hovering Option in Select-field not working [duplicate]

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?

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/

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!');
};
})
})

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/

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

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/

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>

Is it possible to list multiple ID's in a function, that will not trigger a .hide function?

Got a problem with my slide in menu. Check the my JSfiddle here.
At the moment the slide-in menu closes, whenever clicked on everything else than the menu itself. The problem is, that the menu closes, when i click the text. I would like to perhaps list more ID's inside the same function, something like this;
if(isOpened && e.target.id!='slide-in,text')
My script:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
$("#button").hide;
}
});
Thank you!

You can use an array and indexOf
['slide-in', 'text'].indexOf(e.target.id) === -1
Might I suggest that you add a class to the elements you don't want it to apply to?
!$(this).is('.someClass')

instead of checking for all the ids, check for existence of parent with id as slide-in
if(isOpened && e.target.id!='slide-in') {
if(!$(e.target).parents('#slide-in').length) {
$("#slide-in").removeClass("active");
isOpened = false;
$("#button").show();
}
}
check this fiddle

#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 300px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
and add this inside the .js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").show(300);
})
$("#slide-in").click(function(){
$(this).hide(300);
});
});
and if you want more real use this.
in your css change this class like this
#slide-in {
position: fixed;
z-index: 10;
top: 0;
width: 0px;
height: 100%;
background-color: #eee;
border-right: 10px solid #ccc;
display:none;
}
for your js
$(document).ready(function(){
$("#button").click(function(){
$("#slide-in").animate({width: "300px"});
});
$("#slide-in").click(function(){
$(this).animate({width: "0px"});
});
});

Three way toggle to add and remove classes in jQuery

I'm trying to get multiple divs with the class 'box' to switch between three classes: 'box', 'box black', and 'box blue' when I click on them. Something isn't quite working with how I have it set up. Thanks for your help!
$('.box').click(function () {
if ($(this).class == 'box') {
$(this).addClass('black');
} else if ($(this).class == 'box black') {
$(this).removeClass('black');
$(this).addClass('blue');
} else if ($(this).class == 'box blue') {
$(this).removeClass('blue');
}
});

Your element always has the class .box so it will always trigger the initial condition. Try added a secondary initial class like this: DEMO
HTML
<div class="box none"></div>
jQuery
$('.box').click(function () {
if ($(this).hasClass('none')) {
$(this).removeClass('none');
$(this).addClass('black');
} else if ($(this).hasClass('black')) {
$(this).removeClass('black');
$(this).addClass('blue');
} else if ($(this).hasClass('blue')) {
$(this).removeClass('blue');
$(this).addClass('none');
}
});
CSS
.box {
border: solid 1px;
width: 100px;
height: 100px;
background: #fff;
}
.black {
background: #000;
}
.blue {
background: blue;
}

Try
$('.box').click(function () {
if ($(this).hasClass('box')) {
if ($(this).hasClass('black')) {
$(this).removeClass('black').addClass('blue');
} else if ($(this).hasClass('blue')) {
$(this).removeClass('blue');
} else {
$(this).addClass('black');
}
}
});
First you check if the element has class box. If so, you toggle between the second classes (black, blue an no class).

JQuery - Click, disable mouseover with reset

I currently have a tooltip that popups away from the image. However, I cannot seem to get clicking working concurrently with hovering. What I'd like to achieve is to have the popup stay visible when the user clicks the image and disable it when the user clicks outside the popup box, however, it would be visible if the user has the hovers in the image and hidden when the user hovers out of the image. I'm not quite sure how to tackle this.
http://jsfiddle.net/BZ4M7/
HTML
<div class="tooltip">
<div class="description"> Here is the big fat description box</div>
</div>
CSS
.tooltip {
border: 1px #333 solid;
width:200px;
height:200px;
background-image:url('http://mathworld.wolfram.com/images/gifs/sqtripic.gif');
}
.description {
display:none;
position:absolute;
border:1px solid #000;
width:400px;
height:400px;
left: 50%;
top: 50%
background: #000000;
}
JS
$(".tooltip").mouseover(function() {
$(this).children(".description").show();
}).mouseout(function() {
$(this).children(".description").hide();
});
var isShown;
$(".tooltip").mousedown(function() {
if (isShown == false){
$(this).children(".description").show();
isShown = true;
}
}).mousedown(function() {
if (isShown == true){
$(this).children(".description").hide();
isShown = false;
}
});
Any help would be appreciated! :)
Thanks!

After making the following additions/changes to your CSS:
.tooltip {
position: relative;
}
.description {
left: 102%;
}
and the following changes to your JS/jQuery:
$(".tooltip").mouseenter(function (e) {
$(this).children(".description").show();
}).mouseleave(function() {
if (isShown === false) {
$(this).children(".description").hide();
} else {
e.preventDefault();
}
});
isShown = false;
$(".tooltip").click(function (e) {
if (isShown === true) {
e.preventDefault();
$('.description').hide();
isShown = false;
} else {
$(this).children('.description').show();
isShown = true;
}
});
I think this accomplishes what you're after, except hiding .description by click outside of .tooltip. There ISN'T anything there to click on at the moment.
Here's a fiddle: http://jsfiddle.net/BZ4M7/1/

Javascript "mouseover" and "mouseout" events

Consider the following code:
HTML:
<div class='a'></div>
<div class='b'></div>
CSS:
body {
position: relative;
}
.a {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: #777;
}
.b {
position: absolute;
display: none;
background: red;
}
JavaScript:
$(function() {
$('.a').live('mouseover mouseout', function(e) {
switch (e.type) {
case 'mouseover': {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
break;
}
case 'mouseout': {
$('.b').hide();
break;
}
}
});
});
As you can see here, some kind of flickering occurs, because when .b is shown, mouseout automatically occurs. How would you solve this problem ?
The desired behavior is: when the mouse is over .a, .b should be shown (should cover .a), and when the mouse is not over .a, .b should not be shown. .a should always be shown.
The position and dimensions of .a is not constant (should be calculated on the fly).

I come up with this solution:
$(function() {
$('.a').live('mouseover', function(e) {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
});
$('.b').live('mouseout', function(e) {
$(this).hide();
});
});

Try
$(function() {
$('.a').live('mouseover', function(e) {
$('.b').offset({'left': $(this).offset().left,
'top': $(this).offset().top})
.width($(this).outerWidth())
.height($(this).outerHeight())
.show();
});
$('.b').live('mouseout', function(e) {
$('.b').hide();
break;
});
});
This should mean that when the user moves thier mouse over area a, area b is shown and then when they move thier mouse out of area b, area a is reshown.