Jump to content
  • 0

:hover

new01

Asked by new01,

 Share

Question

new01 Explorer

new01

Posted
Posted

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

Link to comment
Share on other sites

32 answers to this question

Recommended Posts

  • 0
tt48 Explorer

tt48

Posted
Posted (edited)

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

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

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

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

Edited by tt48
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

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

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

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
tt48 Explorer

tt48

Posted
Posted (edited) 


<!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 by tt48
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

Да это тоже неправильно…

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Да это тоже неправильно…

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

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

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

Link to comment
Share on other sites
  • 0
bot87 Explorer

bot87

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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);
}

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted 

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

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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

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 )

  • Like 1
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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


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

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


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

  • Like 1
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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


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

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


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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted 
<!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>

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept