:hover

new01 · May 2, 2011

Здесь написано http://htmlbook.ru/css/hover ,что В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.А мне надо hover для label.ПОдскажите как можно решить проблему.? Только ли через JavaScript ?

tt48 · May 2, 2011

Почему label нельзя обернуть ссылкой?

ЗЫ: вполне можно, но при этом ie6 начинает колбасить при

наведении на label внутри ссылки (видать фокус перехватывает у оберточной ссылки)

и label то приобретает display, то теряет. Не прокатил фокус.

Edited May 2, 2011 by tt48

new01 · May 2, 2011

Ну думаю это получится какой-то "глупый" код. Моежт другое решение? :-)

DjTarik · May 2, 2011

Для каких целей это нужно? Может оно вам и не надо)

а так - скриптами.

new01 · May 2, 2011

Да вот имееноо как раз это точно ннужно.

DjTarik · May 2, 2011

Тогда скриптами

new01 · May 2, 2011

Понятно.Спасбио.!

psywalker · May 2, 2011

Почему label нельзя обернуть ссылкой?
ЗЫ: вполне можно, но при этом ie6 начинает колбасить при
наведении на label внутри ссылки (видать фокус перехватывает у оберточной ссылки)
и label то приобретает display, то теряет. Не прокатил фокус.

Хм...ни разу не встречал, чтобы label оборачивали в ссылку. Можно ссылку на пруф пожалуйста.

tt48 · May 2, 2011

Пруф чего? неудачной попытки эксперимента?)

Просто предложил (примеров не видел), но, как уже отписался - не прокатило.

Валидацию проходит, а так вообще - не очень так себе мысль, да.

Извините, если кого сбил с толку. Я не нарошно, чесслово.

swetlana · May 2, 2011

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

DjTarik · May 2, 2011

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

Я уже попытался узнать, нафиг это надо - ответа не получил)))

тут скорее просто теоретический вопрос был...

psywalker · May 2, 2011

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

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

tt48 · May 2, 2011


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>
	</title>
<style type='text/css'>
	.none{
		border: 3px solid red;
		overflow: hidden;
	}
	form{
		border: 1px solid red;
	}
	a{
		display: block;
		border: 3px dotted orange;
		height: 20px;
		width: 200px;
		margin:30px;
		filter: alpha(opacity=0);
	}
	a:hover{
		filter: alpha(opacity=100);
	}
</style>
</head>
<body>
	<div>
		<form action=''>
			<div style='border: 1px dotted black;'>
				<label class='none'>
<!--[if IE6]><a href='#'><![endif]-->LABEL<!--[if IE6]></a><![endif]--></label>
			</div>
		</form>
	</div>
</body>
</html>

из косяков - с visibility сделать не получилось. с filter как обычно глючно - hover засчитывает только если навел на текст или бордер.

Идея мне понравилась)

Хорошо, что мне пока не надо под ie6 верстать [тьфу-тьфу]

Edited May 2, 2011 by tt48

swetlana · May 2, 2011

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

кто бы спорил…

но если уж на то пошло, IE6 поддерживать в полной мере тоже неправильно.

psywalker · May 2, 2011

в порядке продолжения этого эксперимента почему бы не запихнуть наоборот — ссылку в лэйбл?
Да это тоже неправильно…
кто бы спорил…
но если уж на то пошло, IE6 поддерживать в полной мере тоже неправильно.

А при чём тут ИЕ6? Я бы даже такое и в ФФ10 не сделал. Тут дело не в браузере совсем, а в самой реализации и здравом смысле.

bot87 · May 4, 2011

Здесь написано http://htmlbook.ru/css/hover ,что В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.А мне надо hover для label.ПОдскажите как можно решить проблему.? Только ли через JavaScript ?

МОЖНО ЧЕРЕЗ expression+можна через behavior('csshover.htc')

psywalker · May 4, 2011

Здесь написано http://htmlbook.ru/css/hover ,что В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.А мне надо hover для label.ПОдскажите как можно решить проблему.? Только ли через JavaScript ?
МОЖНО ЧЕРЕЗ expression+можна через behavior('csshover.htc')

Приведи пожалуйста код, как такое можно сделать именно через expression ?

mishka · May 4, 2011

expression, csshover.htc - это тоже скрипты, так что если в браузере вырубить поддержку скриптов - то это не сработает.

Так что если уже поддерживать ие6 то лучше всего воспользоваться JS.

Принцип следующий:

.holder:hover .popup,

.holder-hover .popup { display: block }

label:hover,

label.hover { color: #f00 }

а на джс запускаем функцию:

ieHover ( '.holder', 'holder-hover' );

ieHover ( 'label', 'hover' );

ieHover - функция которая принимает 2 параметра:

1 - искомый селектор.

2 - класс который нужно добавить при ховере.

ищет все элементы по заданному селектору, и навешивает им на события ( onmouseover, onmouseout ) ф-ции которые будут добавлять класс при ховере, ну и снимать при отводе курсора.

Приведи пожалуйста код, как такое можно сделать именно через expression ?


при ховере на label добавит класс hover;
label {
	behavior: expression(
	this.onmouseover = new Function("this.className += ' hover'"),
	this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
	this.style.behavior = null);
}

psywalker · May 4, 2011

Медведь. Т.е. смотри:

1) Изначально ты предлагаешь заранее подготовить ЖС функцию?

А потом уже через экспрешан вызывать её?

2)

label {
behavior: expression(
this.onmouseover = new Function("this.className += ' hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
this.style.behavior = null);
}

new Function

Что это такое и что она делает?

Great Rash · May 4, 2011

Что это такое и что она делает?

Ты чо? Это ж функция.

psywalker · May 4, 2011

Что это такое и что она делает?
Ты чо? Это ж функция.

Да это понятно. Я имел ввиду, что она из себя представляет в контексте этого экспрешана и куда отправляются её параметры.

mishka · May 4, 2011

Медведь. Т.е. смотри:
1) Изначально ты предлагаешь заранее подготовить ЖС функцию?
А потом уже через экспрешан вызывать её?

Не, этот експрешн самодостаточный!

Функцию, о которой писал выше, я не привел. Так как на jQuery это несложно, а вот на чистом... я не силен на столько. Вот задачка есть, если потренироваться нужно.

Так вот это на jQuery:

jQuery ( function () {
	ieHover ( '#nav li, label' ); // если передать только один параметр, то класс по умолчанию "hover"
	// тоесть лишкам находящимся в #nav при ховере будет добавляться класс "hover"
	// также всем лейблам при ховере будет добавляться класс "hover"

	ieHover ( '.holder', 'holder-hover' ); // если передавать 2 параметра, то второй - это класс который будет добавляться.
	// елементу .holder, при ховере, будет добавлятся класс "holder-hover"
})

// ieHover
function ieHover ( _selector, _class ) {
	if ( !_class ) _class = 'hover';
	if ( jQuery.browser.msie && jQuery.browser.version < 7 ) {
		jQuery ( _selector ).live ( 'mouseenter', function () {
			jQuery ( this ).addClass ( _class )
		}).live ( 'mouseleave', function () {
			jQuery ( this ).removeClass ( _class )
		})
	}
}

Буду рад рассмотреть другие варианты ( естественно кроме expression и .htc )

psywalker · May 4, 2011

Медвежон, а если не сложно, ты не мог бы привести пример, страницу работающую, с экспрешаном.

Great Rash · May 4, 2011

Да это понятно. Я имел ввиду, что она из себя представляет в контексте этого экспрешана и куда отправляются её параметры.

Ай-яй-яй, какие нафиг параметры.


var fn = new Function(x, y, 'alert(1);');

Это объявление функции такое. X и Y - это параметры функции, а все что в строке выполнится как яваскрипт-код. Это аналог вот такой функции:


var fn = function(x, y) {
  alert(1);
}

psywalker · May 4, 2011

Да это понятно. Я имел ввиду, что она из себя представляет в контексте этого экспрешана и куда отправляются её параметры.
Ай-яй-яй, какие нафиг параметры.
var fn = new Function(x, y, 'alert(1);');
Это объявление функции такое. X и Y - это параметры функции, а все что в строке выполнится как яваскрипт-код. Это аналог вот такой функции:
var fn = function(x, y) {
  alert(1);
}

Ааа, точняк, спасибо дружище

mishka · May 4, 2011

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>:hover</title>
	<style type="text/css">
		li:hover,
		li.hover { font-weight: bold; }
	</style>
	<!--[if lte IE 6]>
		<style type="text/css">
			li {
				behavior: expression(
					this.onmouseover = new Function("this.className += ' hover'"),
					this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
					this.style.behavior = null
				);
			}
		</style>
	<![endif]-->
</head>
<body>
	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
		<li>list item 3</li>
	</ul>
</body>
</html>

Sign In

:hover

Question

Link to comment

Share on other sites

32 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