Question

我正在尝试在具有3px边框的图像上放置播放按钮。当用户滚动图像时，我希望播放按钮：悬停以及图像边框为：悬停。

问题是播放按钮仅在我滚动时才会启用。不是当我滚动图像时。

我的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;
    }

更新：看起来我可以稍微改变一下代码并将播放图像放在我需要的地方。只是有点混淆它最好的位置。

Answer 1

您需要将播放图像放在.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。

Answer 2

使用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样式。

<img/>上的背景图片上的CSS或jquery

2 个答案: