漸變顏色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>

來源

2013-04-23 Betty Carlton

您可以通過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-23 15:49:14 Morpheus

我現在感覺自己像個白癡......非常感謝！我猜對小細節的關注是我真正想念的東西:) – 2013-04-24 10:33:44

漸變顏色OnMouseOver（禁用樣式顏色）???

回答

相關問題