0

我有一些指向我的 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;
}
4

3 回答 3

2

假设您愿意使用 CSS3，我创建了一个示例，展示了一种为图标获得短暂加宽效果的方法（我想这就是问题中“密集”的含义）。此处减少代码：

.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），但如果您正在考虑优雅降级，我认为使用它是非常有效的。

编辑

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

根据 OP 的反馈，我更新了示例，展示了如何通过opacity使用filterIE6-8 更改属性来模拟亮度效果。简而言之，这是代码：

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

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

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

于 2012-12-04T01:49:39.740 回答
1

我不知道密集是什么意思，但是您可以通过 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%'" />

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

于 2012-12-04T01:16:10.837 回答
0

最简单的解决方案可能是让您使用背景图像而不是图像，这样您就可以在它们之间切换。您甚至可以通过这种方式创建 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; }
于 2014-03-15T07:11:15.523 回答