задать hover элементам с одинаковым idd
здравствуйте, как задать hover элементам с одинаковым idd, например есть форма :
echo" <form> <input type="text" class="form" idd="$iduser" value="$title"> <input type="text" class="form" idd="$iduser" value="$name"> <input type="text" class="form" idd="$iduser" value="$patronymic"> <input type="text" class="form" idd="$iduser" value="$surname"> </form> "; |
daimon0482,
Основные виды селекторов |
тогда с одинаковым классом.
echo" <form> <input type="text" class="form'.$iduser.'" value="$title"> <input type="text" class="form'.$iduser.'" value="$name"> <input type="text" class="form'.$iduser.'" value="$patronymic"> <input type="text" class="form'.$iduser.'" value="$surname"> </form> "; |
daimon0482,
:-? вам же дали ссылку
[idd="$iduser"]:hover{}
.class:hover{}
|
рони,
я что то не понимаю что мне искать по вашей ссылке, у меня выводится циклом таблица, с информацией обо всех пользователях из базы, вопрос в том как изменить цвет всех полей связаны с одним из пользователем, при наведение мышкой на его имя или фамилию на любое поле связана с ним? |
daimon0482,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.form[idd="$iduser"]:hover{ background-color: #FFFF00;}
.form:hover{ background-color: #FF00FF;}
</style>
</head>
<body>
<form>
<input type="text" class="form" idd="$iduser" value="$title">
<input type="text" class="form" idd="$iduser" value="$name">
<input type="text" class="form" idd="$iduser" value="$patronymic">
<input type="text" class="form" idd="$iduser" value="$surname">
</form>
<form>
<input type="text" class="form" value="$title">
<input type="text" class="form" value="$name">
<input type="text" class="form" value="$patronymic">
<input type="text" class="form" value="$surname">
</form>
</body>
</html>
|
daimon0482,
может вам tr:hover нужен? |
рони,
нет тут совсем по другому <form> <input type="text" class="form" idd="1" value="Великий князь московский"> <input type="text" class="form" idd="1" value="Василий"> <input type="text" class="form" idd="1" value="Васильевич"> <input type="text" class="form" idd="1" value="Тёмный"> <input type="text" class="form" idd="2" value="Художник"> <input type="text" class="form" idd="2" value="Иван"> <input type="text" class="form" idd="2" value="Иванович"> <input type="text" class="form" idd="2" value="Шишкин"> ......... .......... </form> и вот так допустим большой список, idd их я не знаю у каждого пользователя свой, надо при наведение допустим на фамилию Шишкина чтоб hover прошел одновременно по его имя, отчества, фамилия, профессия все что связанно с этим человеком. |
рони,
может добавить каждого пользователя в отдельный блок, а там уже в js как то при наведение на этот блок типа (this) задать.css <form> <div> <input type="text" class="form" idd="1" value="Великий князь московский"> <input type="text" class="form" idd="1" value="Василий"> <input type="text" class="form" idd="1" value="Васильевич"> <input type="text" class="form" idd="1" value="Тёмный"> </div> <div> <input type="text" class="form" idd="2" value="Художник"> <input type="text" class="form" idd="2" value="Иван"> <input type="text" class="form" idd="2" value="Иванович"> <input type="text" class="form" idd="2" value="Шишкин"> </div> ......... .......... </form> |
daimon0482,
form > div:hover{ background-color: #FF00FF;}
|
рони,
вот так работает отлично, спасибо за помощь.
form > div:hover input{ background-color: #FF00FF;}
|
рони,
а вот такая конструкция не хочет, как только не пробовал
<form>
<table>
<div>
<tr>
<td>
<input type="number" value="90">
</td>
<td>
<input type="number" value="88" >
</td>
<td>
<input type="number" value="44">
</td>
<td>
<input type="number" value="33">
</td>
</tr>
</div>
<div>
<tr>
<td>
<input type="number" value="54">
</td>
<td>
<input type="number" value="22" >
</td>
<td>
<input type="number"value="44">
</td>
<td>
<input type="number" value="33">
</td>
</tr>
</div>
</table>
</form>
form> table> div:hover input{ background-color: #FF00FF;}
|
daimon0482,
дивы уберите
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
form tr:hover input{ background-color: #FF00FF;}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="number" value="90">
</td>
<td>
<input type="number" value="88" >
</td>
<td>
<input type="number" value="44">
</td>
<td>
<input type="number" value="33">
</td>
</tr>
<tr>
<td>
<input type="number" value="54">
</td>
<td>
<input type="number" value="22" >
</td>
<td>
<input type="number"value="44">
</td>
<td>
<input type="number" value="33">
</td>
</tr>
</table>
</form>
</body>
</html>
|
:) да спасибо так работает, а еще вопросик попробовал focus также сделать и не получилось, в чем тут ошибка?
form tr:focus input{ background-color: #FF00FF;}
|
daimon0482,
form tr:focus-within input{ background-color: #FF00FF;}
|
рони,
:thanks: Спасибо большое, все работает отлично. |
| Часовой пояс GMT +3, время: 15:21. |