Question

我有一些指向我的脸书和推特的链接，这些链接都是图片。当我将鼠标悬停在它们上面时，我希望这些链接变亮。当我将鼠标悬停在图像链接上时，我想我可以通过制作两个图像并使图像发生变化来实现这一点。这是最好的方法，如果它是我怎么做的？我找不到任何关于如何这样做的帮助。

这是我的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属性有很好的支持。 transition的效果不太受支持（没有IE9支持），但是如果你正在考虑优雅的降级，我认为使用它是非常有效的。

修改

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

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

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

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

Answer 2

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

<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 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函数..在select中使用新类显示不同的图像

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

鼠标悬停时图像更改

3 个答案: