Переключить элемент наведения CSS с помощью кнопки Javascript - PullRequest
Новая
       8

Переключить элемент наведения CSS с помощью кнопки Javascript

3 голосов
/ 23 февраля 2011

Можно ли использовать Javascript для переключения элемента, который изменяется при наведении курсора. Я хотел бы создать кнопку, которая позволяет элементу div переходить из двух разных состояний: (1) когда элемент div не находится в поле зрения, и (2) когда элемент div находится в режиме наведения.

Есть предложения, как это можно сделать?

Спасибо!

TC

Ответы [ 4 ]

4 голосов
/ 23 февраля 2011

Конечно, это можно сделать только с помощью CSS: 

div { background-color:#000; }
div:hover { background-color:#cc0000; }

При наведении курсора на div цвет фона изменится с черного на красный.

Это мойМнение о том, что использование javascript для этой задачи является излишним.Вы можете сделать несколько довольно сложных вещей с помощью псевдо-селектора :hover.Рассмотрим эту разметку (и CSS):

<div>I'm just a div <h1>I'm just an h1</h1></div>

div h1 { font-size:10px; font-weight:normal; }
div:hover { border:1px dotted #000; }
div:hover h1 { font-size:32px; font-weight:bold; color:#cc0000; }

Как вы можете видеть, мы можем использовать селектор :hover в правиле, подобном выше, чтобы не только стилизовать навескуэлемент, но любые дочерние элементы, а также.Эта предпосылка состоит в том, как много «вылетает» навигация с немного больше, чем вложенные ul s.

2 голосов
/ 23 февраля 2011

Вы уверены, что можете!

Вы можете сделать что-то вроде:

jQuery: 

$("#mydiv").hover(function () 
{
    $(this).toggleClass("active");
    // or $(this).toggle();
  }
);

Стандартный JavaScript: 

function toggle(obj)
{
    var item = document.getElementById(obj);
    if(item.style.visibility == 'visible') { item.style.visibility = 'hidden'; }
    else { item.style.visibility = 'visible'; }
}

HTML: 

<div onmouseover="toggle('mydiv');" onmouseout="toggle('mydiv');" id="mydiv">Hover</div>
0 голосов
/ 23 февраля 2011

вы можете попробовать использовать jQuery, это сделает это намного проще$ ('# divId'). css ('hover', function (index) {что угодно;});

Если вы не предпочитаете это, дайте мне знать, и я могу почесать свой мозг, как это сделать впрямо JS.

0 голосов
/ 23 февраля 2011

<input type = 'button' value = 'change div' onmouseover = 'javascript:getElementById('DivId').className = newStyleClass' onmouseout = 'javascript:getElementById('DivId').className = newStyleClass' />

...