Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2012, 01:36
BoB BoB вне форума
Аспирант
Отправить личное сообщение для BoB Посмотреть профиль Найти все сообщения от BoB
 
Регистрация: 13.04.2009
Сообщений: 39

Изменение свойства :hover по клику дива
Всех приветствую.

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

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

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

Вопрос, можно ли каким-нибудь образом через Jquery изменить свойство класса :hover?
PS: просто свойство класса понятно как менять $(this).css("background-color","black"), а как поменять именно hover?
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2012, 09:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от BoB
свойство класса :hover
Это не "свойство класса"... Это собственно псевдокласс.

Сообщение от BoB
как поменять именно hover?
Его никак не поменять. Это следует из определения псевдокласса...

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

Последний раз редактировалось ksa, 18.10.2012 в 09:11.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2012, 09:27
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2012, 10:22
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

можно и как-то так
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 18.10.2012, 11:49
BoB BoB вне форума
Аспирант
Отправить личное сообщение для BoB Посмотреть профиль Найти все сообщения от BoB
 
Регистрация: 13.04.2009
Сообщений: 39

Сообщение от 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 для каждого свой
Ответить с цитированием
  #6 (permalink)  
Старый 18.10.2012, 18:09
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от ksa
Его никак не поменять. Это следует из определения псевдокласса...
можно через таблицы стилей на странице.

только jQuery так не умеет.
<style>
div:hover {
    color: red; /* красный!! */
}
</style>


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

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

но это не отменяет того, что эту задачу нужно было решать с помощью смены классов!
Ответить с цитированием
  #7 (permalink)  
Старый 21.10.2012, 13:36
Интересующийся
Отправить личное сообщение для Blanco Посмотреть профиль Найти все сообщения от Blanco
 
Регистрация: 20.10.2012
Сообщений: 16

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

http://api.jquery.com/removeClass/
По желанию добавте новый класс.
.addClass("класс без ховера")

http://api.jquery.com/addClass/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение input.value по клику farik Events/DOM/Window 3 13.07.2014 12:15
Изменение стилей по клику x-miller-x Общие вопросы Javascript 9 13.09.2012 21:17
Hover, изменение цвета по наведению vladimircape jQuery 3 01.03.2012 07:49
Меню, выпадающее и сворачивающееся не по hover а по клику adelante jQuery 1 14.01.2011 04:17
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28