html - 鼠标悬停时更改图像

Question

我有一些指向我的 facebook 和 twitter 的链接，这些链接是图片。当我将鼠标悬停在它们上面时，我希望这些链接变亮。我在想我可以通过制作两个图像并在我将鼠标悬停在图像链接上时改变图像来做到这一点。这是最好的方法吗？如果是，我该怎么做？我找不到任何关于如何以这种方式做到这一点的帮助。

这是我的 HTML:

<div class="social">

 <a href="https://www.facebook.com/seth.urquhart?sk=wall&v=wall">
  <img src="../img/facebook_logo_extended.jpg"/>
 </a>

</div>

<br>

<div class="social">

 <a href="https://twitter.com/SethUrquhart">
  <img src="../img/twitter_logo_extended.jpg"/>
 </a>

</div>

这是我的 CSS:

p {
color: #232323;
text-indent:0px;
margin-left:30px;
padding-right: 30px;
}

ul  {
text-align: center;
color: gray;
}

ul a {
text-decoration: none;
color: black;
}

ul a:hover {
text-decoration: underline;
    margin-right: auto;
margin-left: auto;
}

html {
background: #e8e9e1;
}

h1 {
text-align: center;
}

body {
font-family: sans-serif;
color: #232323;
}

.wrap {
min-width: 600px;
width: 1200px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.content {
background: #ffffff;
width: 900px;
margin-left: auto; 
margin-right:auto; 
height: auto;
text-indent: 50px;
}

.footer {
text-align: center;
background-color: #383838;
width: 900px;
margin-left: auto;
margin-right: auto;
color: #e8e9e1;
}

.social {
width: 900px;
margin: auto;
height: 100px;
text-align: center;
background-color: none;
}

.social:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}

ul#list-nav {
padding: 0;
list-style: none;
width: 605px; 
margin: 0 auto;
}

ul#list-nav li {
display:inline;
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}

Answer 1

假设您愿意使用 CSS3，我创建了 an example展示了一种获得图标短暂扩大效果的方法(我想这就是问题中“密集”的意思)。此处简化代码:

.icon {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.icon:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.7);
  -ms-transform: scale(1.7); /* IE 9 */
  -webkit-transform: scale(1.7); /* Safari and Chrome */
}

transform属性(property)有很好的支持。 transition的效果没有得到很好的支持(不支持 IE9)，但如果您正在考虑优雅降级，我认为使用它是非常有效的。

编辑

我正在更新这个答案，因为它可以在未来帮助其他人。 接受的答案不是正确的方法，因为它使用的是 obtrusive JavaScript做关于样式的事情，CSS 是正确的工具。我真的希望 OP 能看看这里并更改他们的代码。

根据 OP 的反馈，我 updated the example显示如何通过更改 opacity 来获得模拟的亮度效果使用 IE6-8 的 filter 回退属性。简而言之，这是代码:

.icon {
  opacity: 1;
  filter: Alpha(Opacity=100);
}

.icon:hover {
  opacity: .6;
  filter: Alpha(Opacity=60);
}

当父级的 background-color 比元素亮时，这很容易并且效果很好。如果你需要更详细的东西(如果你真的想在两个图像之间切换)，我真的建议你使用 CSS sprites .