I am facing an issue with a div structure that contains a label and 4 child divs. My goal is to apply CSS and jQuery effects to only the child divs, excluding the label. To achieve this, I implemented the following code:
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, I noticed that the label, which should not be affected, also displays a pointer cursor and triggers the JavaScript events.
I have set up a fiddle here, and strangely, the JavaScript is not working in the fiddle, although the CSS is still applied to the label.
Does anyone have insights as to why the label is being treated as a div in this case?