HTML中href鏈接的懸停效果

我剛剛開始使用網頁設計，並嘗試將懸停效果添加到這個非常古老的HTML CSS CSS代碼。我想要的其實很簡單。如果我將鼠標懸停在圖像上，圖像應該變成黃色。我也嘗試了css a:hover，但這也不起作用。請給我一個提示。HTML中href鏈接的懸停效果

<td class="mainMenu"> 
    <a href="n_home.html"> 
     <img onmouseover="yellow(this)" src="navig/home_up.gif" alt="Home" width="34" height="23" border="0" /> 
    </a> 
</td>

td.mainMenu { 
    width : 37px; 
    height: 26px; 
    text-align: left; 
    vertical-align: top;  
}

function yellow(x) { 
    x.style.backgroundColor = "#FFFF00"; 
}

來源

2016-06-23 Marta

圖像是否透明？如果不是，你期望看到它背後的背景顏色？ – Quentin

尋求代碼幫助的問題必須包括在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

的第一件事是隱藏圖像。因此，在黃色函數中添加以下代碼。

x.style.opacity = "0";

添加ID您<TD>。

<td class="mainMenu" id="mainMenu">

然後，你需要在同一功能

document.getElementById("mainMenu").style.backgroundColor = "yellow";

根據您TD的尺寸增加的代碼改變<TD>的背景顏色，背景顏色將被添加。

來源

2016-06-23 12:18:51

您的代碼工作中，probleme的是，在後面的背景的變化，這就是爲什麼你沒有看到它

function yellow(x) { 
 
    x.style.backgroundColor = "#FFFF00"; 
 
}

td.metanavigation { 
 
width : 37px; 
 
height: 26px; 
 
text-align: left; 
 
vertical-align: top; 
 
    }

<td class="mainMenu"> 
 
<a href="n_home.html"><img onmouseover="yellow(this)" src="http://pngimg.com/upload/water_PNG3290.png" alt="Home" width="100" height="100" border="0" /></a> 
 
</td>

來源

2016-06-23 12:02:28

x.style.color =「＃FFFF00」怎麼辦？ – Marta

@Marta顏色風格的規則，影響文字，而不是圖形。 –

@Marta'style.color'改變文字顏色，而不是背景 –

其更好使用pesudo選擇器。

所有可以在CSS中完成，不需要JavaScript。在這裏工作，你需要做的小提琴Here is the working Fiddle

來源

2016-06-23 12:11:10

穆罕默德迴應的背馱式，你應該爲背景顏色定義一個CSS規則，並簡單地將它添加或從圖像中刪除。

添加和刪除類函數爲使用定義的IE 9+（http://YouMightNotNeedjQuery.com）

function addClass(el, className) { 
 
    if (el.classList) el.classList.add(className); 
 
    else el.className += ' ' + className; 
 
} 
 

 
function removeClass(el, className) { 
 
    if (el.classList) el.classList.remove(className); 
 
    else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 
 
}

td.metanavigation { 
 
    width: 37px; 
 
    height: 26px; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 

 
.yellow { 
 
    background-color: #FFFF00; 
 
}

<td class="mainMenu"> 
 
    <a href="n_home.html"> 
 
    <img src="http://pngimg.com/upload/water_PNG3290.png" alt="Home" 
 
     onMouseover="addClass(this, 'yellow')" 
 
     onMouseout="removeClass(this, 'yellow')" 
 
     width="100" height="100" 
 
     border="0" /> 
 
    </a> 
 
</td>

來源

2016-06-23 12:20:10

概念上講這是不正確的背景顏色添加到img元素，和相當適用一個到周圍/父元素。

div.parent{ 
 
    background: red; 
 
    } 
 

 
div.parent:hover{ 
 
    background:yellow; 
 
    }

<div class="parent"> 
 
     <img src="http://tny.im/4QH" /> 
 
</div>

這可以在沒有任何JS來實現，只使用CSS。懸停事件傳播到父div導致背景更改。

希望這會有所幫助！

來源

2016-06-23 12:30:35

HTML中href鏈接的懸停效果

回答

相關問題