Вложений: 1
Хочу сделать чтоб именно вся область прямоугольника именно фон, закрашивался а не только ссылка, а получается закрашивается только ссылка при наведении.
#ikonka_menu1 a:hover{background-color:#CCFFFF;} И так тоже не хочет. #left a:hover{background-color:#CCFFFF;} Не получается сделать так чтоб был фон одного цвета, а на нём картинка и текст, а при наведении фон другого цвета, проблема, что закрашивается только область текста а не всё вместе, а всё вместе,кроме фото и текста не закрашивается, я имею ввиду вся ячейка,кроме картинки на фоне и текста на фоне. |
Цитата:
Вообше ты так странно используеш селекторы... :( Логика их появления мне вообще не понятна... |
Цитата:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
#box {
width: 200px;
}
#box > a {
display: block;
text-decoration: none;
}
#box > a:hover {
background-color: red;
}
</style>
</head>
<body>
<div id='box'>
<a href='#'>Test</a>
</div>
</body>
</html>
|
Вложений: 1
Вот вроде сделал как я хотел, но вот хотел спросить. Посмотрите пожалуйста на файл стилей.
Цитата:
#ikonka_menu1:hover{background-color:white;} Чтоб фон менялся при наведении? |
Цитата:
Т.о. не обязательно писать одно и тоже в селекторах идентификатора... Достаточно сделать один селектор класса, описать свойства. Потом присвоить нужным элементам этот класс. |
На моём коде ,подскажите пож. как надо написать правильно, а то не сильно ясно, как в моё случаи это можно сделать.
|
Вложений: 1
1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:
5px center no-repeat; из этого:
#ikonka_menu1{background:url(img/p13.jpg) 5px center no-repeat;
Как оформить правильно чтоб не было дублирования? 2)Не знаю как правильно сделать чтоб при наведении мышкой на один из пунктов меню, пункт меню делался белым. Дело в том, что я для всего меню задал фон: .menu{background-color:#f7f8f6;} А как сделать чтоб именно на определённый навести пункт и он менял свой цвет, не получается никак. Вот переделанный мною код: Файл index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Главная</title> </head> <body> <div class="shapkafon"> <div class="shapka"></div> </div> <div id="left" > <div class='title'></div> <div class="menu"> <div id="ikonka_menu1"> <a href="#">Пункт</a></div> <div id="ikonka_menu2"> <a href="#">Пункт</a></div> <div id="ikonka_menu3"> <a href="#">Пункт</a> </div> <div id="ikonka_menu4"> <a href="#">Пункт</a></div> <div id="ikonka_menu5"> <a href="#">Пункт</a></div> <div id="ikonka_menu6"> <a href="#">Пункт</a></div> <div id="ikonka_menu7"> <a href="#">Пункт</a></div> <div id="ikonka_menu8"> <a href="#">Пункт</a></div> <div id="ikonka_menu9"> <a href="#">Пункт</a></div> <div id="ikonka_menu10"><a href="#">Пункт</a></div> <div id="ikonka_menu11"><a href="#">Пункт</a></div> <div id="ikonka_menu12"><a href="#">Пункт</a></div> <div id="ikonka_menu13"><a href="#">Пункт</a></div> <div id="ikonka_menu14"><a href="#">Пункт</a></div> <div id="ikonka_menu15"><a href="#">Пункт</a></div> <div id="ikonka_menu16"><a href="#">Пункт</a></div> <div id="ikonka_menu17"><a href="#">Пункт</a></div> </div> </div> <!--Закрываем id="left"--> <div id="right"> <div class='title'></div> <div>Пункт 1</div> <div>Пункт 2</div> <div>Пункт 3</div> <div>Пункт 4</div> <div>Пункт 5</div> <div>Пункт 6</div> <div>Пункт 7</div> <div>Пункт 8</div> <div>Пункт 9</div> <div>Пункт 10</div> </div> <div id="center"> <p>Привет мир!</p> </div> <div id="footer"></div> </body> </html> Файл style.css Цитата:
|
Цитата:
<html>
<head>
<style>
#box {
width: 100px;
height: 20px;
border: 1px solid;
}
.on {
background-color: red;
}
</style>
</head>
<body>
<div id='box' onmouseover='this.className="on"' onmouseout='this.className=""'>
</div>
</body>
</html>
|
Цитата:
mySelector {
background-image: url(img/p2.jpg);
background-position-x: 5px;
background-position-y: center;
background-repeat: no-repeat;
}
|
| Часовой пояс GMT +3, время: 17:02. |