Изменить фон первого <td>(из 2) при наведении (mousover) родитель <tr> - PullRequest
Новая
       31

Изменить фон первого <td>(из 2) при наведении (mousover) родитель <tr>

1 голос
/ 13 марта 2012

Привет и извините за мой плохой английский!

У меня есть такая таблица: 

<table id="mytable">
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
   <tr class="use">
      <td class="ftd"></td>
      <td></td>
   </tr>
</table>

и код css: 

table#mytable tr.use:hover  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

Он отлично работает в IE8-IE9 и Firefox, но в IE7 он устанавливает фон (изображение) не на «tr», а на «td». Похоже, фоновое изображение повторяется - х 2 раза.

Так что я ищу решение jquery (для этой «ошибки» IE7), чтобы установить только фоновый цвет для первого «td», когда я наведу родительский «tr». Я могу смириться с тем, что только первый «td» получает цвет фона, а второй «td» остается пустым, потому что посетители нашего сайта, использующие IE7, составляют около 3%.

1 Ответ

1 голос
/ 13 марта 2012

Имея похожий CSS: 

table#mytable tr.use td.tdHovered  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

table#mytable tr.use td.otherTdHovered  {
    background:url("bg/tr_other_bg.png");
    cursor:pointer;
}

Вы можете использовать функцию, подобную этой: 

$("#mytable tr.use").hover(
    function() { 
        $(this).find("td:first").addClass("tdHovered");
        $(this).find("td:last").addClass("otherTdHovered");
    },
    function() { 
        $(this).find("td:first").removeClass("tdHovered");
        $(this).find("td:last").removeClass("otherTdHovered");
    });

ОБНОВЛЕНО: для управления последним столбцом bg.Это ПУТЬ, наверное, не самый лучший.Может быть, этот подход лучше: 

table#mytable tr.use.hovered td  {
    background:url("bg/tr_other_bg.png");
    cursor:pointer;
}

table#mytable tr.use.hovered td.ftd  {
    background:url("bg/tr_bg.png");
    cursor:pointer;
}

и js: 

$("#mytable tr.use").hover(
    function() { 
        $(this).addClass("hovered");
    },
    function() { 
        $(this).removeClass("hovered");
    });
...