1

我有一个包含标签和 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。

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

有谁知道为什么这个标签被当作 div 对待？

4

2 回答 2

3

Bootstrap 正在给出label指针，并且您的鼠标事件正在被调用.score以及> div. 当您将鼠标悬停在 上时label，您也将鼠标悬停在.score

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

鼠标输入不会从标签中触发，但是当您将鼠标悬停在其中一个 DIV 上的鼠标标签上时，会调用鼠标退出，因为您正在退出 DIV。

于 2013-10-30T15:21:05.430 回答
1

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

<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 数据属性的一种方式。

于 2013-10-30T15:30:45.050 回答