Форум

BoB · #1 (**permalink**) 18.10.2012, 01:36

Всех приветствую.

Делаю свой сайт, и не знаю как реализовать некую штуку.

Есть дивы, которые представляют собой прямоугольники с названием разделов.
При наведении на них, с помощью css, в hover прописан поворот дива, для интерактивности.
А по нажатию на него, див увеличивается и с помощью ajax подгружается страничка.

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

Вопрос, можно ли каким-нибудь образом через Jquery изменить свойство класса :hover?
PS: просто свойство класса понятно как менять $(this).css("background-color","black"), а как поменять именно hover?

ksa · #2 (**permalink**) 18.10.2012, 09:08

Сообщение от BoB

свойство класса :hover

Это не "свойство класса"... Это собственно псевдокласс.

Сообщение от BoB

как поменять именно hover?

Его никак не поменять. Это следует из определения псевдокласса...

А вот изменить работу с элементом можно.
Например работать с событиями onmouseover, onmouseout и onclick...

ksa · #3 (**permalink**) 18.10.2012, 09:27

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid;
	cursor: pointer;
}
.on {
	background-color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	var o=$('.box');
	o.mouseover(function (){
		$(this).addClass('on');
	});
	o.mouseout(function (){
		$(this).removeClass('on');
	});
	o.click(function (){
		$(this).removeClass('on');
	});
});
</script>
</head>
<body>
<div class='box'></div>
</body>
</html>

bes · #4 (**permalink**) 18.10.2012, 10:22

можно и как-то так

<style>
.but1:hover {
	background: green;
}
.but2:hover {
	background: gray;
}
</style>
<button class="but1">click</button>
<script>
window.onload = function () {
	document.getElementsByTagName('button')[0].onclick = function () {
		if (this.className == 'but1') {
			this.className = 'but2';
		} else {
			this.className = 'but1';
		}
	}
}
</script>

BoB · #5 (**permalink**) 18.10.2012, 11:49

Сообщение от ksa

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid;
	cursor: pointer;
}
.on {
	background-color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	var o=$('.box');
	o.mouseover(function (){
		$(this).addClass('on');
	});
	o.mouseout(function (){
		$(this).removeClass('on');
	});
	o.click(function (){
		$(this).removeClass('on');
	});
});
</script>
</head>
<body>
<div class='box'></div>
</body>
</html>

Этот вариант попробовал, но если увести курсор за див и затем обратно навести, то див все равно будет поварачиваться.

Второй вариант мне понравился и я сделал так

$(this).removeClass('nav');
  $(this).addClass('nav_r');

Повторил свойства класса nav и nav_r, а псевдо классы hover для каждого свой

melky · #6 (**permalink**) 18.10.2012, 18:09

Сообщение от ksa

Его никак не поменять. Это следует из определения псевдокласса...

можно через таблицы стилей на странице.

только jQuery так не умеет.

<style>
div:hover {
    color: red; /* красный!! */
}
</style>


<div>наведи на меня. я должен быть зелёным, а не красным.</div>

<script>
document.styleSheets[0].cssRules[0].style.color = "green";
</script>

но это не отменяет того, что эту задачу нужно было решать с помощью смены классов!

Blanco · #7 (**permalink**) 21.10.2012, 13:36

Что за удивительно сложный подход к вопросу...
Если вам больше не нужен псевдокласс :ховер, удалите класс из элемента.

.removeClass("класс с ховером");

http://api.jquery.com/removeClass/
По желанию добавте новый класс.

.addClass("класс без ховера")

http://api.jquery.com/addClass/

Форум

Справочник

Discord чат

Курсы javascript