悬停图像效果答案

【问题标题】：Hover image effect悬停图像效果
【发布时间】：2014-05-25 16:14:06
【问题描述】：

我的页面顶部有一个标题栏，它是红色的。我在 Facebook 和 Twitter 的页面中有两个链接。当我在图像上滚动鼠标时，背景变为白色，表示它已被突出显示。链接中包含 Facebook 和 Twitter 符号的图像，它们都具有白色背景。图标的背景颜色为白色，这显然使网页上的背景变白。
我尝试将背景更改为红色，但是当链接悬停在它上面时，它会保持红色。我尝试过翻转图像，但是当我将鼠标悬停在链接上时，给出的效果是逐渐将颜色从红色变为红色，并且翻转图像立即捕捉到新图像。有没有办法让图像与悬停变化同步缓慢变化？

这是我的社交媒体链接 HTML：

<div class="SocialMedia">
  <ul>
    <li><img src="../Images/facebook.png" width="20" height="20"><a href="https://www.facebook.com/tokyo.corner.3?fref=ts" target="_blank"> Facebook </a></li>
    <li><img src="../Images/Twitter.jpg" width="20" height="20"><a href="https://twitter.com/TokyoCorner" target="_blank"> Twitter </a></li>
  </ul>
</div><!--Social Media-->

这是我的 CSS

#Wrapper .TitleBar .SocialMedia {
  position: absolute;
  left: 445px;
  top: -3px;
  height: 51px;
  width: 896px; 
}

#Wrapper .TitleBar .SocialMedia ul{
  list-style-type:none; 
}

#Wrapper .TitleBar .SocialMedia ul li {
  display:inline;
  padding:10px;
  margin:0px;
  float:right;
}
#Wrapper .TitleBar .SocialMedia ul li a {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#FFF;
  text-decoration:none;
  height:50px;
  width:208px;
  text-shadow:1px 1px 1px #000;
}
#Wrapper .TitleBar .SocialMedia ul li:hover {
  background:#FFF;
  color:#000000;
  -webkit-transition:all 0.3s linear;
}
#Wrapper .TitleBar .SocialMedia ul li:hover a {
  color:#000000;
  text-shadow:1px 1px 1px #000;

}
 #Wrapper .TitleBar .SocialMedia ul li a:hover {
  color:#000;
  text-shadow:1px 1px 1px #000; 
}
#Wrapper .TitleBar .SocialMedia ul:hover {
  color:#000;
}

【问题讨论】：

请创建一个问题的 Jsfiddle。谢谢

标签： html css image hover

【解决方案1】：

您的问题不是很清楚，但我相信这就是您的答案 ;)
http://css-tricks.com/fade-image-within-sprite/

至于你的代码，你在错误的地方声明了“转换”规则。您应该在这些选择器中声明它，而不是在 ":hover" 选择器中。

#Wrapper .TitleBar .SocialMedia ul li {...}
#Wrapper .TitleBar .SocialMedia ul li a {...}

【讨论】：

【解决方案2】：

很抱歉，我无法正确回答您的问题，但我认为您可以使用 jquery 来做到这一点：-

<img src="../Images/facebook.png" width="20" height="20" id="fb">
<img src="../Images/Twitter.jpg" width="20" height="20" id="tw">

在 jquery 中：-

$(document).ready(function() {
$('#fb').hover(function(){

$('#Wrapper').css('background-color','whatever u want to');
},
function(){
$('#wrapper').css('background-color','to original color');
});
});

对于推特也是如此。

不要忘记包含 jquery 文件：-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

【讨论】：

【解决方案3】：

最好的方法是使用jQuery Animate。它允许您控制可以在 hover 上运行的元素上效果的速度/持续时间。

这里有一篇解释方法的文章：http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

【讨论】：

肯定会读到这个。感谢您的帮助！