用鼠标悬停改变图像

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

我不知道密集是什么意思，但是您可以通过 onmouseover 更改任何图像属性并使用 onmouseout 恢复它。这是一个代码 sn-p 来展示如何做到这一点。此代码只是在鼠标悬停时使图像变暗，然后在鼠标离开时恢复它：

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.opacity=0.5"
    onmouseout = "document.getElementById('test').style.opacity=1" />

如果您想让悬停时的图像更大，您可以更改任何尺寸属性。例如，这是一个特别显着的尺寸跳跃：

<img 
    src = "test.jpg" 
    style = "width:50%;" 
    id = "test" 
    onmouseover = "document.getElementById('test').style.width='75%'"
    onmouseout = "document.getElementById('test').style.width='50%'" />

请注意，以上内容仅供说明之用。还有其他方法可以做到这一点，我并不是说我呈现的方式是最好的，甚至是好的。但是，这很清楚，我只是想让您清楚地了解如何做到这一点。

Answer 2

假设您愿意使用 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 属性有很好的支持。 transition 的效果并没有得到很好的支持（不支持 IE9），但是如果您正在考虑优雅降级，我认为使用它是非常有效的。

编辑

我正在更新这个答案，因为它可以在未来帮助其他人。 公认的答案不是正确的方法，因为它使用obtrusive JavaScript 来处理样式问题，而 CSS 是正确的工具。我真的希望 OP 看看这里并更改他们的代码。

根据 OP 的反馈，我 updated the example 展示了如何通过使用 IE6-8 的 filter 更改 opacity 属性和后备来获得模拟的亮度效果。简而言之，代码如下：

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

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

当父级的background-color 比元素轻时，它很容易并且效果很好。如果您需要更详细的内容（如果您真的想在两个图像之间切换），我真的建议您使用CSS sprites。

Answer 3

最简单的解决方案可能是让您使用背景图像而不是图像，这样您就可以在它们之间切换。您甚至可以通过这种方式创建 3 个状态.. 非活动、悬停和选中..

考虑级联和特异性。如果您首先定义非活动状态，然后定义悬停状态，覆盖相同的定义，最后定义选定状态，同样具有相同的定义和特异性级别。现在每个都会在适当的时候覆盖另一个，否则它们会发生。

一张图片

div { background:url('http://www.placehold.it/200x200/f2f2f2') no-repeat; }

悬停时显示不同的图像

div:hover { background:url('http://www.placehold.it/200x200/666666') no-repeat; }

如果元素是锚点或定义了一些 onclick 函数.. 使用新类在选择时显示不同的图像

div.selected { background:url('http://www.placehold.it/200x200/000000') no-repeat; }