Question

我有一个包含标签和4个div的div。我想要一些css和jQuery来影响4个子div，但不是标签，所以我写了以下内容：

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

但是标签有一个指针光标，它会触发mouseenter / leave JavaScript。

我创建了一个fiddle here，有趣的是它并没有在小提琴上发射JavaScript，但它仍然受到css的影响。

有谁知道为什么这个标签被视为div？

Answer 1

Bootstrap正在提供label指针，您的鼠标事件将在.score以及> div上调用。当您将鼠标悬停在label上时，您也会将鼠标悬停在.score

上编辑：我改变了你的JS小提琴的日志记录，这里http://jsfiddle.net/sEa5W/1/

鼠标输入isn; t从标签中被触发，但是当您从其中一个DIV悬停到鼠标标签时，正在调用鼠标出口，因为您正在退出DIV。

Answer 2

也许这是一个想法（如果你使用html5）来使用<img data-large="path-to-large-image"并在你的jQuery选择中使用它。

<div class="score row-fluid">
    <label class="span8">Text...</label>
    <div class="span1"><img src="thumbnail1.jpg" data-large="fullsize1.jpg" alt="img1" /></div>
    <div class="span1"><img src="thumbnail2.jpg" data-large="fullsize2.jpg" alt="img2"></div>
    <div class="span1"><img src="thumbnail3.jpg" data-large="fullsize3.jpg" alt="img3"></div>
    <div class="span1"><img src="thumbnail4.jpg" data-large="fullsize4.jpg" alt="img4"></div>
</div>

和jQuery：

$('div.score>div.span1').on('mouseenter', function() {
    if($(this).not('.score-selected')) {
        var $img = $(this).children('img');
        $img.attr('src', $img.attr('data-large'));
    }
})
.on('mouseleave', function() {
    if($(this).not('.score-selected')) {
        var $img = $(this).children('img');
        $img.attr('src', $img.attr('data-large'));
    }
});

编辑大声笑，只是注意到我使用了两次大，但这也可以用小东西来完成。只是数据 - 任何东西。这只是一种向您展示您不必操纵字符串的方法，但您可以使用html5数据属性。

标签被视为div

2 个答案: