Градиентные цвета 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, а при наведении мыши вы заменяете его сплошным цветом. На выводе вы снова замените другой сплошной цвет. Что вы хотели? –

@Gaby aka G. Petrioli Честно говоря, я не считаю себя профессионалом, и я очень смущен. У вас есть предложение? Или совет для новичка? Постскриптум Я никогда не говорил, что код безупречен, но, к сожалению, я просто человек :) –

это было не обвинение ... просто не ясно, что вы хотите. .. Вы можете описать функциональность, которую вы * хотите *? –

onmouseover вы ориентируетесь только background-color, а не background свойство, которое вы используете в вашем CSS. Установка style.background вместо style.backgroundColor устраняет проблему. JSFiddle Example

источник

2013-04-23 15:49:14 Morpheus

Я действительно чувствую себя идиотом прямо сейчас ... Большое спасибо! Я угадываю, что внимание к мелочам - это то, чего я действительно не хватает :) –

Градиентные цвета OnMouseOver (отключение цвета стиля) ???

ответ

Смежные вопросы