鼠標懸停更改圖像

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，我創建了一個示例，展示了一種獲得圖標短暫擴展效果的方法（我想這就是“密集”在問題中的含義）。 減少代碼在這里：

.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的反饋，我更新了該示例 ， 該示例顯示了如何通過使用IE6-8的filter使用后備功能更改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個狀態。.inactive，懸停和selected ..

請考慮級聯和特定性。如果首先定義不活動狀態，則先定義懸停狀態，然后覆蓋相同的定義，最后定義選定的狀態，再次使用相同的定義和特定性級別。 現在，每一個都將在適當的情況下覆蓋另一個，否則它們將發生。

一個圖像

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; }