html - 悬停图片效果

Question

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

这是社交媒体链接的 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

很抱歉，我无法正确回答您的问题，但我认为您可以使用 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>