Question

我刚刚开始使用网页设计，我尝试为这个非常古老的HTML，CSS Javascript代码添加悬停效果。我想要的其实我很简单。如果我将鼠标悬停在图像上，图像应该变黄。我也尝试过css a:hover，但这也不起作用。请给我一个提示。

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

Answer 1

您需要做的第一件事就是隐藏图像。因此，请在黄色功能中添加以下代码。

x.style.opacity = "0";

将 ID 添加到＆lt; td＆gt; 。

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

然后你需要通过在同一个函数中添加代码来更改＆lt; td＆gt; 的背景颜色

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

根据您的td大小，将添加背景颜色。

Answer 2

你的代码工作，问题是后面的背景发生了变化，这就是为什么你看不到它

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

从Mohamed的回复中退出，您应该为背景颜色定义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>

Answer 4

最好使用pesudo选择器。

所有可以在CSS中完成，不需要javascript。这是工作小提琴Here is the working 的 Fiddle

Answer 5

从概念上讲，向img元素添加背景颜色是不正确的，而是将其应用于周围/父元素。

div.parent{
  background: red;
  }

div.parent:hover{
  background:yellow;
  }

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

这可以在没有任何JS且仅使用CSS的情况下实现。悬停事件将传播到父div，导致背景发生变化。

希望这有帮助！

HTML

5 个答案: