I have a div containing a label and 4 divs. I want some css and jQuery to affect the 4 child divs, but not the label, and so I wrote the following:
HTML:
<div class="score row-fluid">
<label class="span8">Text...</label>
<div class="span1"><img></div>
<div class="span1"><img></div>
<div class="span1"><img></div>
<div class="span1"><img></div>
</div>
CSS
.score > div {
cursor:pointer;
}
jQuery
$('> div', '.score').on('mouseenter', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
var point = $img.attr('src').lastIndexOf('.');
var src = $img.attr('src').substring(0,point);
var newSrc = src + "-hover" + $img.attr('src').substring(point);
$img.attr('src', newSrc);
}
})
.on('mouseleave', function() {
if($(this).not('.score-selected')) {
var $img = $(this).children('img');
var point = $img.attr('src').lastIndexOf('.');
var point2 = $img.attr('src').lastIndexOf('-hover');
var src = $img.attr('src').substring(0,point2);
var newSrc = src + $img.attr('src').substring(point);
$img.attr('src', newSrc);
}
});
However the label has a pointer cursor, and it fires the mouseenter/leave JavaScript.
I've created a fiddle here, and interestingly it's not firing the JavaScript on the fiddle, but it is still being affected by the css.
Does anyone know why this label is being treated as if it's a div?
Bootstrap is giving label the pointer, and your mouse events are being called on .score as well as > div. When you hover over the label, you are also hovering over .score
EDIT: I changed the logging on your JS fiddle, here http://jsfiddle.net/sEa5W/1/
The mouse enter isn;t getting fired from the label, but the mouse exit is being called when you hover over to the mouse label from one of the DIVs because you are exiting the DIV.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments