背景图像上的CSS或jquery在<；img>；

我正在尝试将播放按钮放置在具有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>

---

更新：看起来我可以稍微修改一下代码，然后将播放图像放在需要的地方。只是有点困惑它的最佳位置

您需要将播放图像放在

中。查看字段缩略图

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

---

然后将CSS中的

.thumbnail play:hover

更改为

.thumbnail play.hover

。

使用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

样式。

我希望在翻滚图像（不是播放图像，而是单个.png图像）时播放按钮接合。如果我将“播放”按钮设为一个块，并将其扩展到图像的大小，那么我将丢失链接。有意义吗？也许您需要一些jquery来实现这一点，jquery是一个选项吗？或者你必须更改标记：（两者都可以。我已经运行了jquery，但必须有一种CSS方式。我不介意更改标记。我唯一不能删除的是主图像。谢谢@Plynx，但不幸的是，我无法将其作为我的CMS（Drupal）放入正在创建这些。我将查看javascript。+1使用

…缩略图：hover.thumbnail play

选择器的好技巧。@Plynx我可以像上面那样更改html并使用CSS，但我的VideoPlayerOn.png图像显示在我的主图像后面。我无法将其放在前面。@Dan这可能是您的CS中其他地方的堆叠冲突在调试CSS之前，你可以在你的

缩略图上设置
z-index:9999
或者其他一些东西，看看是否有效。我在第四行发现一个语法错误：$（'.thumbnail play'）.CSS（'background'，'url（VideoPlayerOn.png）0px-50px no repeat'；@Dan:我忘记用
关闭CSS函数了）
，现在检查.PD。你应该能够修复诸如括号之类的细节；）Tom很接近，但是当你翻过盒子，然后翻过照片，它会变回原来的样子。我希望图像一直滚动到光标离开框。汤姆，我不知道该告诉你什么。当我将鼠标移到大图像上时，小图像会发生变化。但是，当我把鼠标放在小图像上时，它会变回第一个图像。我希望它一直保持在第二张图片上。
$('.views-field-field-thumbnail').hover(function()
{
   $(this).next('.thumbnail-play').addClass('hover');
},
function()
{
   $(this).next('.thumbnail-play').removeClass('hover');
});

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