Изменение цвета на таблицах с эффектом зависания

-3

В настоящее время я работаю над веб-сайтом Wordpress. Я хочу, чтобы на целевой странице были разные поля, которые все ссылаются на разные подстраницы. Я использовал таблицы для создания этих полей. Кроме того, я добавил эффект зависания, поэтому, когда вы наводите указатель мыши на любой из этих боксов/таблиц, фон станет синим, а шрифт - белым.Изменение цвета на таблицах с эффектом зависания

есть один заголовок и одна строка (одна колонка) в поле/таблице. Шрифт заголовка должен быть синим, шрифт строки должен быть черным (если не применять эффект наведения). Мне удалось установить эффект наведения на заголовок и строку отдельно, но теперь мне нужно условие if else, поэтому всякий раз, когда вы наводите указатель мыши на заголовок (шрифт заголовка становится белым, цвет фона становится синим), строка должна иметь эффект наведения , также (шрифт поворачивается на белый, цвет фона становится синим) и наоборот. Я не программировал целую вечность, поэтому я немного потерял условие if else. Может ли кто-нибудь мне помочь? Любое решение было бы весьма полезно.

Код для таблицы:

<div class="table-3"><a title="website" href="website"> 
<table width="100%"> 
<thead> 
<tr> 
<th><hr style="border: 1px solid;" width="30%" align="left">content</th> 
</thead> 
<tbody><a title="website" href="website"> 
<td>content</td> 
</tr> 
</tbody> 
</table> 
</a> 
</div>

Код для эффекта парения (будет такой же для строки):

.table-3 th:hover{ 
    background-image: linear-gradient(top, #0E5278 0%, #0E5278 100%); 
    background-image: -o-linear-gradient(top, #0E5278 0%, #0E5278 100%); 
    background-image: -moz-linear-gradient(top, #0E5278 0%, #0E5278 100%); 
    background-image: -webkit-linear-gradient(top, #0E5278 0%, #0E5278 100%); 
    background-image: -ms-linear-gradient(top, #0E5278 0%, #0E5278 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E5278), color-stop(1, #0E5278)); 
    border:1px solid #0E5278; 
    font-style:normal; 
    text-transform:none; 
    color: #ffffff !important; 
}

Что код, как, что нужно, чтобы иметь эффект парения на всей коробке (как будто это не заголовок и строка, а только одна коробка)?

источник

2014-02-06 anja

Вопросы, требующие кода, должны демонстрировать минимальное понимание решаемой проблемы. Включите попытки решения, почему они не работают и ожидаемые результаты. См. Также: Контрольный список вопросов переполнения стека. –

код для совместного использования кода для понимания этого способа – sanjeev

, пожалуйста, покажите нам код, который вы попробовали или по крайней мере сделаете для скрипки, поэтому мы можем помочь вам лучше –

Если я правильно понимаю, что вы хотите, просто применить: парить к столу, на основании ответа Джо Мари использовать следующий CSS:

thead tr a{ 
    color: #328EFD; 
} 

table:hover, table:hover a{ 
    color:#fff; 
    background-color:#328EFD; 
} 

tr a{ 
    color:#000; 
}

источник

2014-02-06 11:26:05

Да, большое спасибо, это то, что мне нужно! – anja

из-за вашего отсутствия показанной информации, я не уверен, если я получу свой вопрос правильно, но любезно дать этому выстрел, вот моя скрипка: http://jsfiddle.net/2wWUN/1/

HTML код:

<body> 
    <table border="1"> 
     <thead> 
      <tr> 
       <td><a href="#">This is the Header</a></td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><a href="#">some row content</a></td> 
      </tr> 
     </tbody> 
    </table> 
</body>

CSS код:

thead tr{ 
    color: #328EFD; 
} 

thead tr:hover a, tr:hover a{ 
    color:#fff; 
    background-color:#328EFD; 
} 

tr{ 
    color:#000; 
}

источник

2014-02-06 10:53:02

Это точно то, что я сделал (также см. Комментарии выше). Теперь было бы здорово, если вы нажмете над заголовком, и у вас есть эффект наведения на заголовок, что эффект мыши на тело отображается также, как если бы он был одним ящиком. это помогает? – anja

Изменение цвета на таблицах с эффектом зависания

ответ

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