Question

我的页面顶部有一个标题栏，它是红色的。我在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;
}

Answer 1

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

至于你的代码，你已宣布＆＃34;过渡＆＃34;在错误的地方统治。你应该在这些选择器中声明它，而不是在＆＃34;：hover＆＃34;的。

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

Answer 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');
});
});

同样适用于Twitter。

不要忘记包含jquery文件： -

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

Answer 3

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

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

悬停图像效果

3 个答案: