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

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

Любые предложения, как это можно сделать?

Спасибо!

TC


javascript html css hover
person TronCraze    schedule 23.02.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Конечно, это можно сделать только с помощью 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.

person Nathan Anderson    schedule 23.02.2011
comment
div:hover не на 100 % совместим с разными браузерами. - person TNC; 23.02.2011
comment
Я предполагаю, что ваше утверждение должно было означать, что div: hover не на 100% совместим с разными браузерами. Это верно. IE 6 по умолчанию не любит :hover ни на чем, кроме тегов a. Если требуется поддержка IE 6, см. code.google.com/p/ie7-js< /а>. Этот скрипт позволит использовать :hover для любого элемента (среди многих других вещей). - person Nathan Anderson; 23.02.2011
comment
@truenorth Существуют ли какие-либо браузеры, кроме IE6, которые не справляются с этим? - person ClosureCowboy; 23.02.2011
comment
Информацию о совместимости :hover см. на странице quirksmode.org/css/contents.html#t16. Все другие браузеры поддерживают метод, который я проиллюстрировал выше. - person Nathan Anderson; 23.02.2011
comment
@ClosureCowboy, в дополнение к ссылке Натана, IE6 не поддерживает его в div, а IE7 поддерживает его частично, поскольку, к сожалению, CSS2 не полностью поддерживался при первом выпуске. - person TNC; 23.02.2011
comment
Частичная поддержка для псевдоселектора :active, :hover поддерживается полностью (как сказано в предоставленной мной ссылке) - person Nathan Anderson; 23.02.2011

arrow_upward
3
arrow_downward

Вы точно можете!

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

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>
person TNC    schedule 23.02.2011

arrow_upward
-1
arrow_downward

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

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

person richsoni    schedule 23.02.2011