2

3pxの境界線を持つ画像の上に再生ボタンを配置しようとしています。ユーザーが画像をロールオーバーしたときに、再生ボタンを：hoverにし、画像の境界線を：hoverにします。

問題は、再生ボタンをロールオーバーしたときにのみ機能することです。画像をロールオーバーしたときではありません。

私のHTML：

<div class="views-field-field-thumbnail">
       <a href="/videos">
          <img src="individual.png" width="230" height="130">
       </a>
</div>

<div class="thumbnail-play">Play</div>

私のCSS：

.views-field-field-thumbnail img {border: 7px solid #333;}

.views-field-field-thumbnail img:hover {border: 7px solid #000;}

.thumbnail-play {
    text-indent: -9999px;
    background: url(VideoPlayerOff.png) 0px 0px no-repeat;
    position: relative;
    height: 50px;
    width: 50px;
    margin-top: -95px;
    margin-bottom: 0px;
    margin-left: 0px;
    }

.thumbnail-play:hover {
    text-indent: -9999px;
    background: url(VideoPlayerOn.png) 0px -50px no-repeat;
    }

更新：コードを少し変更して、必要な場所に再生画像を配置できるようです。最適な場所に少し混乱しています。

4

2 に答える 2

2

.views-field-field-thumbnailでアクセスできるように、再生画像をdiv内に配置する必要があります:hover。

<div class="views-field-field-thumbnail">
    <a href="/videos">
       <img src="individual.png" width="230" height="130">
    </a>
    <div class="thumbnail-play">Play</div>
</div>


.views-field-field-thumbnail:hover img {border: 7px solid #000;}
.views-field-field-thumbnail:hover .thumbnail-play {
    text-indent: -9999px;
    background: url(VideoPlayerOn.png) 0px -50px no-repeat;
}

これができない場合は、JavaScriptを使用する必要があります。

$('.views-field-field-thumbnail').hover(function()
{
   $(this).next('.thumbnail-play').addClass('hover');
},
function()
{
   $(this).next('.thumbnail-play').removeClass('hover');
});

CSSでに変更.thumbnail-play:hoverします。.thumbnail-play.hover

于 2013-02-02T04:42:19.040 に答える
0

jQueryを使用すると、次の行を追加する必要があります。

$('document').ready(function(){
    $('.views-field-field-thumbnail img, .thumbnail-play').hover(
      function(){
        $('.thumbnail-play').css('background', 'url(VideoPlayerOn.png) 0px -50px no-repeat');
    },function(){
        $('.thumbnail-play').css('background', 'url(VideoPlayerOff.png) 0px 0px no-repeat');
        }
    );
});

cssは同じですが、.thumbnail-play:hoverスタイルを削除するだけです。

于 2013-02-02T04:42:38.287 に答える