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-thumbnaildiv 中，以便您可以使用: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 回答