Изменить цвет фона для одной ячейки при зависании над другим (только css)

Я попытался прочитать об этом и иметь gooten, чтобы он работал раньше, но не может получить эффект зависания на одной ячейке, чтобы изменить фон, цвет другой ячейки. Какие-либо предложения?Изменить цвет фона для одной ячейки при зависании над другим (только css)

CSS

.frontpagetabellskraddarsy { 
    background-color: #F8F8F8; 
    border: 1px solid #DDDDDD; 
    border-collapse: separate; 
    border-radius: 4px; 
    padding: 15px; } 

.frontpagecelltextskraddarsy { 
    background-color: #FFFFFF; 
    padding-top: 5px; 
    text-align: center; 
} 

.frontpagecellbildskraddarsy:hover .frontpagecelltextskraddarsy 
{ 
    background-color: #289CDD; 
    color: #FFFFFF; 
}

HTML

<table class="frontpagetabellskraddarsy" style="background-color: #f8f8f8;" cellspacing="20"> 
    <tbody> 
     <tr> 
      <td style="text-align: center; background-color: #f8f8f8;" colspan="3" width="33%">[separator headline="h2" title="Skräddarsy din drömresa"]</td> 
     </tr> 
     <tr> 
      <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecellbildskraddarsy"><img alt="" src="http://media.baliexperten.se/2014/01/skraddarsypaket.png" class="frontpageresepaketbildskraddarsy"></td> 
     </tr> 
     <tr> 
      <td onclick="location.href='http://www.baliexperten.se/skraddarsydd-resa/'" class="frontpagecelltextskraddarsy"><strong>SKRÄDDARSY DIN DRÖMRESA </strong> 
Vi hjälper dig att skräddarsy just din drömresa till Bali 
      </td> 
    </tbody> 
</table>

источник

2014-01-16 user3201945

can u plz add jsfiddle – neel

Вы не можете достичь этого напрямую. Вы можете попытаться использовать селектор sibling ('+' и '~'), но вы будете жестко кодировать html-структуру в CSS таким образом. Или вы можете попытаться выделить столбец (http://stackoverflow.com/questions/16967366/how-do-i-highlight-an-html-table-column-with-bootstrap). Простой js - это путь. – vbo

Хорошо. Поэтому, возможно, здесь нужен js. Был надеяться, что смогу сделать все это с помощью CSS. – user3201945

Вы не можете достичь этого с произвольной разметке. Вы единственный вариант, чтобы захватить парить на строку таблицы tr, а затем анимировать либо соседний ряд или один, если это клетки с помощью помощью adjacent sibling combinator:

tr:hover + tr td

Quick and messy example fiddle with your code example

Парящий над ячейкой и достижения эффекта для ячейки другой строки невозможно с CSS3! Селекторы Уровень 4 имеет предложение до determine the Subject of a selector, где вы получаете больше гибкости (но я думаю, что этот случай все равно не сработает).

<tr id="one"> 
    <td></td> // #one td:hover 
</tr> 
<tr id="two"> 
    <td></td> // #two td 
</tr>

Один думает, что что-то вроде #one td:hover + #two td может работать, однако, контекст последнего элемента в первой части селектора считается. Когда вы на уровне , вы не можете сделать шаг назад, чтобы выбрать родного брата + #two.

#one:hover + #two td с другой стороны, работает, потому что вы захватить парить на #one, затем траверс к следующей строке + #two, а затем, наконец, «выберите» дочерний элемент td.

источник

2014-01-16 10:31:20 Christoph

Спасибо. Хорошо. Итак, как мне реализовать эту строку кода? – user3201945

Sry. Пропустил, что вы включили пример скрипки. Окей. И если я хочу, чтобы эта функция была только в этой конкретной таблице, тогда код был бы .frontpagetabellskraddarsy tr: hover + tr td? – user3201945

Работает отлично. Благодаря! Теперь я хотел бы получить тот же эффект на другой таблице с несколькими ячейками. Howeve, я бы хотел, чтобы только одна конкретная ячейка меняла цвет фона при наведении курсора на другую конкретную ячейку, а не на всю строку, например. Возможно ли это без js? – user3201945

<style type="text/css"> 
     #hoverDiv, #otherDiv { 
      width: 200px; 
      margin: 5px; 
      float: left; 
      height: 30px; 
      border: 1px solid gray; 
      border-radius: 5px; 
     } 

     #hoverDiv:hover + #otherDiv { 
      background: #9ce; 
     } 
    </style> 

    <div id="hoverDiv"> 
     Hover me! 
    </div> 

    <div id="otherDiv"> 
     My color will change :) 
    </div>

источник

2014-01-16 10:58:42 Rahmani

Изменить цвет фона для одной ячейки при зависании над другим (только css)

ответ

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