1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Вопрос по CSS

Главные вкладки

Аватар пользователя digital_sword digital_sword 31 июля 2009 в 13:39

Пара вопросов:

Квадратик был белым, при наведении на него мышкой стал красным. Понятно, что нужно использовать a:hover {, но как заставить покраснеть весь квадратик? От свойства background-color ссылки краснеет только ее фон, height {} здесь не помогает...
И еще, как заставить меняться рисунок (сейчас там принтер) при наведении на разные ссылки? background-image и background-position? А есть какие-нибудь красивые решения, например, чтобы рисунок менялся медленно...

Еще вот:

Здесь: принаведении мышкой на ссылку прямоугольничек опять краснеет, а четкий рисунок становится более прозрачным. Здесь как? Опять background-image и background-position ссылки и 2 принтера, один четкий другой нет?

А может стоит использовать вообще не css?

Комментарии

Аватар пользователя Antoniy Antoniy 31 июля 2009 в 18:50

digital_sword wrote:

Квадратик был белым, при наведении на него мышкой стал красным. Понятно, что нужно использовать a:hover {, но как заставить покраснеть весь квадратик? От свойства background-color ссылки краснеет только ее фон, height {} здесь не помогает...

HTML:
<a class="box" href="index.html">Жмиииии!!!</a>

CSS:

a.box {
display:inline;
border:1px solid;
padding:5px;
}

a.box:hover {
background-color:red;
}

Аватар пользователя digital_sword digital_sword 31 июля 2009 в 19:54

PVasili, я выложил рисунок. Мне его нужно сверстать. Ссылки пока нет.
Vetlan, что за плагин? Вообще в будущем так и хочу, но пока поставлю вариант с css
AntonTau, прямоугольной области не получается. Рамка только вокруг ссылки (т.е. такой пятиугольник, ссылка же в 2 строки идет). height, width здесь не помогает.

Аватар пользователя Antoniy Antoniy 31 июля 2009 в 20:27

digital_sword wrote:

AntonTau, прямоугольной области не получается. Рамка только вокруг ссылки (т.е. такой пятиугольник, ссылка же в 2 строки идет). height, width здесь не помогает.

Извините, ошибся!

Так:

HTML:
<a class="box" href="index.html">Жми!<br>А то то расхватают!</a>

CSS:

a.box {
display:block;
width:250px;
border:1px solid;
text-align:center;
padding:5%;
}

a.box:hover {
background-color:#eaeaea;
}

Аватар пользователя Antoniy Antoniy 31 июля 2009 в 21:14

digital_sword wrote:
А с картинками как быть?

Пока так:

HTML:

<a class="boxlink" href="index.html">
<div class="boxtext">Жми!<br>А то то расхватают!</div>
</a>

CSS:

a.boxlink {
display:block;
padding-top:528px;
width:500px;
background-image:url(image.jpg);
background-position:top;
background-repeat:no-repeat;
}

.boxtext {
border:1px solid;
padding-bottom:30px;
padding-top:30px;
text-align:center;
width:498px;
}

a.boxlink:hover {
opacity:0.5;
background-color:#eaeaea;
}

Аватар пользователя Northruler Northruler 31 июля 2009 в 20:46

jquery включен в друпал. Посмотреть что это такое можно на jquery.com.
По поводу изменения картинки, при наводе мышкой на определенный предмет. Тут 2 варианта.
1. Скриптами на mouseover динамически заменять background-image или img.
2. Скриптами на mouseover применить к картинке свойство jquery - fadeTo()

Аватар пользователя PVasili PVasili 31 июля 2009 в 21:25

Посмотрите как сделано меню на drupal.ru и как вкладки.

Менять по :hover лучше не картинку а позицию фона "в спрайте". И картинки, если они используются как меню лучше заложить в фон объекта.

Плавно менять - только через JS