Question

I’m trying to place a play button over an image that has a 3px border. When the user rolls over the image I want the play button to :hover and also the image border to :hover.

Problem is that the play button only engages when I roll over it. Not when I roll over the image.

My 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>

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

Update: Looks like I can alter the code a bit and place the play image wherever I need it to be. Just a bit confused where its best placed.

Answer 1

Using jQuery you just need to add this lines:

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

The css is the same, just delete the .thumbnail-play:hover style.