Hover

clakson · February 6, 2010

Доброе время суток. Неравно решил попробовать себя в изучении создания сайтов

Решил сделать панельку вверху сайта, типо меню: в фотошопе сделал фон в виде градиента написал там разные буковки для обозначения мест выплываюших меню... которые в последствии хочу ссделать с помошью visibility.

Первым делом сделал блок под размер фоновой картинки размером 1100х160. Далее в этом блоке сделал еше один для того чтобьы отметить участок первого слова (ну для выплываюшего меню). А тут начались проблемы: идея была в том что при наведении мышки на этот блок будет изменятся его фон точнее картинка тем самым как бы подсвечивая первоначалюную надпись на панели, это я хотел сделать с помошью тега

a.one: hover {

}

В теле написал следующее <a class="one" href="..." ><div class="b"></a>

но дело в том что фон не отобраджается при наведении курсора, да мало того что фон, даже если использовать background-color то и цвет не отображатеся...

Подскажите что может ыбть неверно?

ps Накануне когда изучал принцип работы ховера все работало замечательно а почемуто сейчас не работает

прекрасно понимаю что вопрос может показаться глупым и неодекватным но всеже если не труджно ответьте пожалуйста.

Mavrun · February 6, 2010

правильно писать так

a:hover.one {

}

clakson · February 6, 2010

правильно писать так
a:hover.one {
background-image: url('123.jpg');
}

спасибо но не помогло)) я проверял и на тестовом варианте там как бы все работало)) и даже с a.one: hover

В стилях налепил следующим образом: div.a {

height:1000px;

min-height:1000px;

max-height:1000px;

width:1100px;

min-width:1100px;

max-width:1100px;

z-index:1;

}

div.b {

height:160px;

min-height:160px;

max-height:160px;

width:130px;

min-width:130px;

max-width:130px;

position:relative;

left:90px;

top:0px;

z-index:2;

background-color:#000000;

opacity:0.12;

}

a: hover.one {

color:#000000;

opacity:1;

}

в хтмл:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<body>

</div>

</body>

</html>

Edited February 6, 2010 by clakson

psywalker · February 6, 2010

правильно писать так
a:hover.one {
background-image: url('123.jpg');
}

Зачем писать такую чушь и сбивать с толку людей?

ТС,так делал?

a.one:hover {

}

clakson · February 6, 2010

Зачем писать такую чушь и сбивать с толку людей?
ТС,так делал?
a.one:hover {
background-image: url('123.jpg');
}

да так делал но не отображатеся... может не хочет отображать из за того что это именно блок? но я его сделал прозрачным так что все равно не понятно

psywalker · February 6, 2010

да так делал но не отображатеся... может не хочет отображать из за того что это именно блок? но я его сделал прозрачным так что все равно не понятно

Нихрена ты так не делал, найди отличие, вот твой пример, сравни с моим

a.one: hover {
background-image: url('123.jpg');
}

clakson · February 6, 2010

Нихрена ты так не делал, найди отличие, вот твой пример, сравни с моим
a.one: hover {
background-image: url('123.jpg');
}

е мое я изначально делал именно так a.one: hover {

psywalker · February 6, 2010

е мое я изначально делал именно так a.one: hover {

Вот поэтому и не работало.

clakson · February 6, 2010

Вот поэтому и не работало.

Наверное я совсем тупой но разницы в вашем и своем коде найти не смог))

Ваш:

a.one: hover {

}

Мой:

a.one: hover {

background-color:#000000;

}

причем мало того что картинку не отображает но и черный цвето аналогично.

Хтмл:

Подскажите что не так

psywalker · February 6, 2010

Наверное я совсем тупой но разницы в вашем и своем коде найти не смог))
Ваш:
a.one: hover {
background-image: url('123.jpg');
}
Мой:
a.one: hover {
background-color:#000000;
background-image: url('glav.jpg');
}
причем мало того что картинку не отображает но и черный цвето аналогично.
Хтмл:
<a class="one" href="..." ><div class="b"></div></a>
Подскажите что не так

Это не мой код.

Ваш:
a.one: hover {
background-image: url('123.jpg');
}

Сравни его с моим, который я выше приводил.

clakson · February 6, 2010

Нихрена ты так не делал, найди отличие, вот твой пример, сравни с моим
a.one: hover {
background-image: url('123.jpg');
}

"ТС,так делал?

a.one:hover {

}"

Сраваю:

a.one: hover {

}

Edited February 6, 2010 by clakson

psywalker · February 6, 2010

"ТС,так делал?
a.one:hover {
background-image: url('123.jpg');
}"
Сраваю:
a.one: hover {
background-image: url('123.jpg');
}

И не видишь разницы вообще?

clakson · February 6, 2010

И не видишь разницы вообще?

с пробелом и без не работает если вы об этом

rus · February 6, 2010

Никто не прав

Правильно так: .one a:hover {...}

psywalker · February 6, 2010

Никто не прав
Правильно так: .one a:hover {...}

Почему-это, это совсем разные вещи, твой вариант говорит о том, что в некоем блоку .one все ссылуи при наведении...и т.д.

А мой говорит о том, что ссылка с классом .one при наведении...и т.д.

Тут уже ТС нужно смотреть по ситуации.

с пробелом и без не работает если вы об этом rolleyes.gif

Тогда не знаю, попробуй вариант rusа

rus · February 6, 2010

Почему-это...

Потому что можно написать как:

.one {color:red;}

а можно и так:

.one a {color:red;}

и так и так будет правильно.

А вот если:

.one:hover {color:red;}

и

.one a:hover {color:red;}

то второй будет правильным, а первый нет.

З.Ы. хотя на деле не проверял... может и ошибаюсь, просто впервые с таким сталкиваюсь.

Edited February 6, 2010 by rus

Int · February 6, 2010

.one:hover работать будет, но не в IE (если только .one - это не ссылка, но я не помню, может надо явно a: указывать). А остальные и для tr это поймут и для div

А дело не может быть в незакрытом div?

Edited February 6, 2010 by Int

SelenIT · February 7, 2010

Логично, div не закрыт и при построении DOM-дерева скорее всего тупо вываливается из ссылки (можно проверить firebug-ом, developer tools'ами из IE8 и т.п.). Правильный CSS показал psywalker. Но для надежности лучше вкладывать в ссылку не div, а span (задав ему display:block), до HTML5 div внутри ссылки невалиден.

Потому что можно написать как:
.one {color:red;}
а можно и так:
.one a {color:red;}
и так и так будет правильно.

Это совсем разные вещи. Первое -- элементы с классом "one", второе -- ссылки внутри элементов с этим классом. С псевдоклассом абсолютно то же самое.

clakson · February 8, 2010

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

Justnewone · February 8, 2010

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

не надо пытаться делать этот калл. Лучше поищите решение под названием iehover.htc и как следует его изучите.

psywalker · February 8, 2010

Например тут http://psywalker.ru/Portfolio/Himik/csshover.htc

clakson · February 8, 2010

Например тут http://psywalker.ru/Portfolio/Himik/csshover.htc

как бы для меня это сейчас крутовато если пытаться разобрать что там написано ибо к скриптам я даже не подходил)) у меня то основные веши не очень идут... ну а если изучать скрипты то думаю не на конкретном примере...

Назрел еше вопрос на счет позиционирования. Необходимо чтобы блочный элемент располагался по центру экрана- какие параметры отвечают за это? (именно которые можно написать в файле со стилями css, а не <div align="center">); тоесть к примеру за вертикальные позицианоирование отвечает vertical-align.

Edited February 8, 2010 by clakson

shvv · February 8, 2010

Назрел еше вопрос на счет позиционирования. Необходимо чтобы блочный элемент располагался по центру экрана- какие параметры отвечают за это? (именно которые можно написать в файле со стилями css, а не <div align="center">); тоесть к примеру за вертикальные позицианоирование отвечает vertical-align.

Нужно задать ширину, а потом - марджины слева и справа - auto.

npofopr · February 8, 2010

Кто то может подсказать как заставить кликаться сию конструкцию для 6 и 7 IE.

display:block; и задание высоты и длины для ссылки пробовалось.

csshover.htc подключен

<a href="link.html"><div class="blocki">
	<div>
		<img src="./img/index_pic1.gif" alt="" width="262" height="128" />
	</div>
	<p>По-нашему!</p>
</div></a>

div.blocki {
	width:290px;
	height:190px;
	float:left;
	margin:10px 8px;
	_margin:10px 5px;
	cursor:pointer;
}
div.blocki p {
	font-size:18px;
	color:#ff6000;
	text-decoration:underline;
	text-align:center;
}
#content div.blocki:hover, #content a.active div.blocki {
	background:url(./img/index_bgpr.gif) no-repeat 0 0;
	/*_width:290px;
	_height:190px;*/
	cursor:pointer;
}
div.blocki div {
	background:url(./img/index_pbg.gif) no-repeat 0 0;
	width:263px;
	height:129px;
	margin:0 auto;
	margin-top:12px;
}

Edited February 8, 2010 by npofopr

psywalker · February 8, 2010

как бы для меня это сейчас крутовато если пытаться разобрать что там написано ибо к скриптам я даже не подходил)) у меня то основные веши не очень идут... ну а если изучать скрипты то думаю не на конкретном примере...

А тебе не предлагали ничего изучать, твоя задача тупо скопировать код и сохранить его в формате .htc, а далее уже просто в отдельном файле ЦСС для ИЕ6 просто подключить например так *html div.gallery ul li img {behavior: url(csshover.htc);} - главное указать правильный путь. И всё, остальное за тебя уже всё сделали.

Кто то может подсказать как заставить кликаться сию конструкцию для 6 и 7 IE.

display:block; и задание высоты и длины для ссылки пробовалось.

csshover.htc подключен

<a href="link.html"><div class="blocki">
	<div>
		<img src="./img/index_pic1.gif" alt="" width="262" height="128" />
	</div>
	<p>По-нашему!</p>
</div></a>

div.blocki {
	width:290px;
	height:190px;
	float:left;
	margin:10px 8px;
	_margin:10px 5px;
	cursor:pointer;
}
div.blocki p {
	font-size:18px;
	color:#ff6000;
	text-decoration:underline;
	text-align:center;
}
#content div.blocki:hover, #content a.active div.blocki {
	background:url(./img/index_bgpr.gif) no-repeat 0 0;
	/*_width:290px;
	_height:190px;*/
	cursor:pointer;
}
div.blocki div {
	background:url(./img/index_pbg.gif) no-repeat 0 0;
	width:263px;
	height:129px;
	margin:0 auto;
	margin-top:12px;
}

Убери блочные элементы из строчных срочно.

npofopr · February 8, 2010

А тебе не предлагали ничего изучать, твоя задача тупо скопировать код и сохранить его в формате .htc, а далее уже просто в отдельном файле ЦСС для ИЕ6 просто подключить например так *html div.gallery ul li img {behavior: url(csshover.htc);} - главное указать правильный путь. И всё, остальное за тебя уже всё сделали.
Убери блочные элементы из строчных срочно.

если убрать, то ничего и не останется )

Sign In

Hover

Question

Link to comment

Share on other sites

27 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information