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 の 1 つからマウス ラベルにカーソルを合わせると、マウスの終了が呼び出されます。

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

編集笑、大を2回使用したことに気付きましたが、これは小などでも実行できます。データだけです。これは、文字列を操作する必要はなく、html5 データ属性を使用できることを示す方法にすぎません。

于 2013-10-30T15:30:45.050 に答える