html - 在按钮中悬停时切换图像

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

您需要将事件处理程序移动到 anchor 而不是 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>