Наведение дочернего элемента четного элемента с помощью CSS

Мне нужно установить наклон элемента 'a', который является дочерним элементом 'tr', который выбирается селектором nth-child (even).Наведение дочернего элемента четного элемента с помощью CSS

В принципе, у меня есть обычная таблица с несколькими строками, и внутри каждой ячейки таблицы есть ссылка «a», которую я хочу выделить при наведении курсора, но только в четные строки.

Мой CSS код:

.table-striped tr:nth-child(even) td a:hover { 
    color: #3c3c3c; 
}

И это не работает.

Как я могу это решить?

.table-striped tr:nth-child(even) td a:hover { 
 
    color: Red; 
 
}

<table class="table-striped"> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text here</td> 
 
    <td><a href="#">Click here</a> 
 
    </td> 
 
    </tr> 
 
</table>

источник

2015-08-07 Mateusz Wardak

Добро пожаловать в переполнение стека! Вопросы, требующие помощи кода, должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. См. [** Как создать минимальный, полный и проверенный пример **] (http://stackoverflow.com/help/mcve) –

Ваш CSS, кажется, работает нормально. Проверьте Добавленный фрагмент. – Pugazh

-1

Попробуйте это:

.table-striped tr:nth-child(even):hover td a { 
    color: #3c3c3c; 
}

источник

2015-08-07 09:52:39 paulmaszlik

Это изменит цвет 'a', если он будет виден в любом месте строки. – Pugazh

CSS-код, который вы используете работает отлично:

.table-striped tr:nth-child(even) td a:hover { 
 
    color: #3c3c3c; 
 
    color:red;/*for dislay i have use this red color;*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-striped"> 
 
    <tr> 
 
     <td><a href="#">link 1</a></td> 
 
     <td><a href="#">link 2</a></td> 
 
     <td><a href="#">link 3</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#">link 1</a></td> 
 
     <td><a href="#">link 2</a></td> 
 
     <td><a href="#">link 3</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#">link 1</a></td> 
 
     <td><a href="#">link 2</a></td> 
 
     <td><a href="#">link 3</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#">link 1</a></td> 
 
     <td><a href="#">link 2</a></td> 
 
     <td><a href="#">link 3</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="#">link 1</a></td> 
 
     <td><a href="#">link 2</a></td> 
 
     <td><a href="#">link 3</a></td> 
 
    </tr> 
 
</table>

источник

2015-08-07 10:08:18

Наведение дочернего элемента четного элемента с помощью CSS

ответ

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