Question

我有一个灰色的facebook图标和一个全彩色的facebook图标。我想将它们放在我的网站上，这样当鼠标光标放在灰色图标上时，它就变成了全彩色光标。我如何实现这一目标？

Answer 1

使用CSS sprites并根据元素和元素的CSS类移位：hover。

Answer 2

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

Answer 3

你需要有2个版本的Icon，一个是灰色，另一个是彩色，并且在悬停时，切换：

icon
{
  background-image: greyIconURL
}

icon:hover
{
  background-image: coloredIconURL
}

另一种方式，更好的是@Kon solution

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'" />

编辑使用此代替您希望遵循规则但增加复杂性和KB

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标签只是因为在可能的情况下使用图像标签是一个好习惯，因为浏览器将图像作为图像而不是div标签，在那里他们将其视为内容块（不好！）。

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

5 个答案: