如何在悬停时使图标从灰色变为全色

Question

我有一个灰色的facebook图标和一个全彩的facebook图标。我想把它们放在我的网站上，这样当鼠标光标放在灰色图标上时，它就会变成全彩色的。我该如何做到这一点？

Answer 1

使用CSS精灵，并根据元素和元素的CSS类移动位置：悬停。

Answer 2

旧问题，带旧链接的新答案：
http://webdesignerwall.com/tutorials/html5-grayscale-image-hover显示了一个使用jQuery的解决方案，它不需要2个图像（因此，如果您想制作更大的图库，它可以节省时间和资源）

Answer 3

您需要从图标中获得两个版本，一个是灰色，另一个是彩色，悬停时切换：

icon
{
  background-image: greyIconURL
}
icon:hover
{
  background-image: coloredIconURL
}

另一种更好的方法是@Kon解决方案

Answer 4

这可以通过css中的过滤器来完成。示例

  /* needed code */
  .employee:hover img {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.01);
      }
   .employee img {
    filter: gray;
    -webkit-filter: grayscale(1);
    transition: all .8s ease-in-out;
    width: 100%; }
    
    /* style col -- no need */
    
    .row {
      display:flex;
    }
    .col-md-3{
      padding:5px;
      width:25%;
    }

 <div class="row ourTeam">
      <div class="col-md-3 col-12  q-pa-md employee">
        <img src="https://placeimg.com/640/480/any">
        <h6>Name</h6>
        <span>CEO</span>
      </div>
        <div class="col-md-3 col-12  q-pa-md employee">
        <img src="https://placeimg.com/640/480/any">
        <h6>Name</h6>
        <span>CEO</span>
      </div>
            <div class="col-md-3 col-12  q-pa-md employee">
        <img src="https://placeimg.com/640/480/any">
        <h6>Name</h6>
        <span>CEO</span>
      </div>
        <div class="col-md-3 col-12  q-pa-md employee">
        <img src="https://placeimg.com/640/480/any">
        <h6>Name</h6>
        <span>CEO</span>
      </div>
    </div>

太容易了！

Answer 5

<img src="grey.png" onmouseover="this.src='blue.png'" onmouseout="this.src='greay.png'" />

EDIT使用此选项，而不是希望遵循规则，但会增加复杂性和KBs

HTML

<img id="yourImage" />

JS-

document.getElementsByTagNames('body')[0].addEventListener('load', function() {
    document.getElementById('yourImage').addEventListener('mouseover', function() {
        document.getElementById('yourImage').src = 'color.jpg'
    }, false);
    document.getElementById('yourImage').addEventListener('mouseout', function() {
        document.getElementById('yourImage').src = 'grey.jpg'
    }, false);
}, false);

PS这使用javascript而不是css标记，因为尽可能使用image标记是一种很好的做法，因为浏览器会将图像作为图像，而不是将其视为内容块的div标记（这不好！）。