悬停和褪色答案

【问题标题】：Hovers and Fading悬停和褪色
【发布时间】：2014-02-18 21:51:58
【问题描述】：

我希望你能帮助我。我正在开发我的新作品集网站，需要一些关于作品展示部分的悬停效果的帮助。我不是优秀的开发人员，所以请原谅我的代码 sux x)，我主要做设计。是的，我使用 Bootstrap 3.0 作为我的框架。

// 这里是 HTML 代码 //

<div class="portfolio" id="portfolio"> <!-- portfolio begin -->

/unimportant stuff...../

<div class="container my-creations"> 
<div class="row">
        <div class="col-md-3">
            <a href="#">
                <div class="circle">
                <img src="img/gmedia.png" alt="" id="gmedia" width="115" height="115">
                </div>
            </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/ginc.png" alt="" id="ginc" width="136" height="114">
                    </div>
                </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/fgeeks.png" alt="" id="fgeeks" width="107" height="115">
                    </div>
                </a>
            </div>

            <div class="col-md-3">
                <a href="#">
                    <div class="circle">
                        <img src="img/weboxit.png" alt="" id="wbx" width="115" height="115">
                    </div>
                </a>
            </div>
     </div> <!-- end of row -->
</div>  <!-- end of my-creations -->
</div> <!-- end of portfolio -->

//这里是下面的CSS//

.portfolio {height: 100%;}

.my-creations {margin-top: 60px;}

.circle {
width: 270px;
height: 270px;
line-height: 270px;
border-radius: 1000000px;
background-color: #262d30;
border: 8px solid #2c3235;
text-align: center;
background-image: url('img/gmedia.png') no-repeat;}

.circle img {
vertical-align: middle;
display: inline-block;  
margin-bottom: 15px;
filter: url(filters.svg#grayscale); /* Firefox */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Webkit */ }

#ginc {margin-bottom: 30px;}

.circle img:hover {
filter: none;
-webkit-filter: grayscale(0);}

这是我的问题：

有没有办法在悬停 .circle 时让我的 img 更改过滤器？
如何在 img 上应用淡入淡出悬停？这样它就慢慢地从黑白图像变为彩色图像。 ---- 已回答，感谢 bboysupaman 和 JoshC！

我希望你能帮助我，如果你需要更多信息，尽管问。

【问题讨论】：

这是关于您问题的动画部分：developer.mozilla.org/en-US/docs/Web/Guide/CSS/…
我不建议使用动画，我会坚持使用过渡。这是实现目标的更好方法。 =)

标签： html css image twitter-bootstrap hover

【解决方案1】：

您可以使用 CSS 过渡！

将以下内容添加到您的 CSS。 =)

.circle img
{
    transition: all 2s;
    -webkit-transition: all 2s;
}
.circle:hover img {
    opacity:.5;
}

【讨论】：

您可以将“2s”部分更改为您喜欢的任何增量。
虽然在两者上都有过渡效果很好，但您只需要在 img 元素本身上使用它，我认为不需要在 :hover 上添加过渡效果，除非它与最初的过渡不同。 1+ 虽然，这里的例子jsfiddle.net/D7a6r 它会在悬停和悬停时转换。
你是对的 JoshC！谢谢！这是我从一些疯狂的过渡中养成的习惯，但这不适用于这种情况。好电话！
不过，您仍然需要在 :hover 上进行一些更改：) 需要进行转换，已编辑。

【解决方案2】：

另一方面，您可以使用 Jquery 制作动画。我很确定 Twitter-bootstrap 也带有 Jquery 代码。

但是，如果您担心性能，您可以坚持使用 css3。

HTML 代码：

<div class="circle1">

   <img src="http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"
width="80px" height="80px" /> 

</div>

jQuery 代码：

$(document).ready(function () {

   $(".circle1").mouseenter(

   function () {
       $(".circle1").fadeOut();

    });

   $(".circle1").mouseleave(

   function () {
       $(".circle1").fadeIn();

    });


});

这里是一个 jsfiddle 的例子。 http://jsfiddle.net/7MV6Q/

【讨论】：