Question

我正在尝试更改悬停在按钮上的图像。到目前为止，我已经设法让图像本身在你悬停在它上面时改变，但不是在按钮本身悬停的时候。这是代码。

    <style>
    .btn-large{
        width: 300px;
        height: 350px;
    }
    .movie{
        width: 90px;
        height: 90px;
        position: relative;
        margin-top: 25px;
    }
    #hardware:hover, #hardware:active{
        background: #23c6c8;
        color: white;
    }
    </style>

    <a href="#" class="btn btn-large" id="hardware">
            <figure>
                <img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png" onmouseover="this.src='http://i.imgur.com/BuK26gd.png'" onmouseout="this.src='http://i.imgur.com/u8wsfFL.png'" />
            </figure>
                <div class="details">
                    <h2>All Tickets</h2></br>
                    <p>View all tickets</p>
                </div>
            </a>

Answer 1

您需要将事件处理程序移动到锚点而不是img并搜索img标记

<强> Demo

<a href="#" class="btn btn-large" id="hardware"
   onmouseover="this.getElementsByTagName('img')[0].src ='http://i.imgur.com/BuK26gd.png'" 
   onmouseout="this.getElementsByTagName('img')[0].src = 'http://i.imgur.com/u8wsfFL.png'">
  <figure>
    <img class="movie" alt="ticket" src="http://i.imgur.com/u8wsfFL.png"  />
  </figure>
  <div class="details">
    <h2>All Tickets</h2></br>
    <p>View all tickets</p>
  </div>
</a>

Answer 2

＆＃13;

    .btn-large {
      width: 300px;
      height: 350px;
    }
    .details {
      background: url("http://i.imgur.com/u8wsfFL.png") no-repeat;
      height: 90px;
    }
    .details:hover,
    .details:active {
      background: url("http://i.imgur.com/BuK26gd.png") no-repeat;
    }
    figure {
      height: 90px;
    }

＆＃13;

<a href="#" class="btn btn-large" id="hardware">
  <div class="details">
    <figure>
      &nbsp;
    </figure>
    <h2>All Tickets</h2>
    </br>
    <p>View all tickets</p>
  </div>
</a>

＆＃13;

非常简单 - 只需将details和figure的css添加到样式表中，然后在悬停时设置背景图片和其他图像。您可以从html中删除交替的imgs

这是fiddle

Answer 3

使用类似的东西

<style>
.btn-large{
    width: 300px;
    height: 350px;
}

.image{
    width: 90px;
    height: 90px;
    position: relative;
    margin-top: 25px;
    background:url("http://i.imgur.com/u8wsfFL.png");
}

.btn-large:hover .image{
    background:url("http://i.imgur.com/BuK26gd.png");
}

.btn-large:hover .details{
    background: #23c6c8;
    color: red;
}
</style>



<div class="btn-large">

        <div class="image">           
        </div>

        <div class="details">
             <h2>All Tickets</h2></br>
             <p>View all tickets</p>
        </div>

</div>

在按钮上悬停时切换图像

3 个答案: