渐变颜色OnMouseOver（禁用样式颜色）???

问题描述：

所以我创建了一个表格，我试着为它添加onmouseover效果，所以我可以更改单元格的背景颜色。显然，当没有为背景设置颜色（在样式中）时，所有东西都像魅力一样。但是当它出现时，我无法想象它...我们有什么帮助？这里是我的代码：渐变颜色OnMouseOver（禁用样式颜色）???

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<script type="text/javascript"> 
    var link = true; 
</script> 
<body> 
<style type="text/css"> 
    .tableX td 
    { 
     width: 33.33%; 
     padding: 5px; 
     font-family: 'Sans Serif',segoe UI light, Century Gothic; 
     color: #FFFFFF; 

    } 
     .tableX td.largeLightBlue 
     { 
      height: 150px; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
      width: 33.33%; 
      font-size: 18px; 
      background: linear-gradient(#1ba3c7, #13738C); 
      text-align: left; 
      font-family: 'Segoe UI','Century Gothic', sans-serif; 
      vertical-align: text-top; 
      padding-left: 10px; 
      cursor: pointer; 
     } 
     .tableX td.largeGreen 
     { 
      height: 150px; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
      width: 33.33%; 
      font-size: 18px; 
      background: linear-gradient(#35a44f, #297E3D); 
      text-align: left; 
      font-family: 'Segoe UI','Century Gothic', sans-serif; 
      vertical-align: text-top; 
      padding-left: 10px; 
      cursor: pointer; 
     } 
     .tableX td.largeBlue 
     { 
      height: 150px; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
      width: 33.33%; 
      font-size: 18px; 
      background: linear-gradient(#0C63CD, #07366F); 
      text-align: left; 
      font-family: 'Segoe UI','Century Gothic', sans-serif; 
      vertical-align: text-top; 
      padding-left: 10px; 
      cursor: pointer; 
     } 

    .tableX 
    { 
     width: 740px; 
     border-collapse: separate; 
     border-spacing: 10px; 
    } 
</style> 
<table class="tableX"> 
    <tr> 
     <td onmouseover="style.backgroundColor='#E01B6A';" onmouseout="style.backgroundColor='#FAD957';" onclick="if (link) window.location ='http://www.yahoo.com'" class="largeLightBlue" > 
      <b>Some sample text</b><br /> 
      <ul> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet three</li> 
      </ul> 
     </td> 
     <td onclick="if (link) window.location ='http://www.google.com'" class="largeGreen"> 
      <b>Second Sample text</b> 
      <ul> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet three</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet four</li> 
      </ul> 
     </td> 
     <td onclick="if (link) window.location ='http://www.bing.com'" class="largeBlue" > 
      <b>Third Sample Box</b> 
      <ul> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet one</li> 
       <li style="font-size: 12px; color: #ffffff; vertical-align: text-top;">Bullet two</li> 
      </ul> 
     </td> 
    </tr> 

</table> 

</body> 
</html>

您可以通过CSS应用背景渐变，并在鼠标悬停时将其替换为纯色。在鼠标移出时，您可以用另一种纯色替换。你想要发生什么？ – 2013-04-23 12:36:55

@Gaby aka G. Petrioli说实话，我不认为自己是专业人士，我很困惑。你有什么建议吗？或者为新手提供建议？附：我从来没有说过代码是完美的，但不幸的是，我只是一个人类:) – 2013-04-23 13:20:21

这不是一个指责......它只是不清楚你想要发生什么..你能描述你想要的功能吗？ – 2013-04-23 14:58:23

答

onmouseover你只指定一个background-color，不background属性，它使用的是在你的CSS。设置style.background而不是style.backgroundColor可解决此问题。 JSFiddle Example

我现在感觉自己像个白痴......非常感谢！我猜对小细节的关注是我真正想念的东西:) – 2013-04-24 10:33:44

渐变颜色OnMouseOver（禁用样式颜色）???

相关推荐