Добавление состояния onmouseover в код Javascript

Я еще не могу писать код Javascript, и я пытаюсь отредактировать код, который переключает div, чтобы быть невидимым/видимым. В настоящее время он показывает div, когда пользователь нажимает на ссылку, однако я бы хотел, чтобы вместо этого скрытый div стал видимым при наведении курсора мыши.

Вот код Javascript:

<script language="JavaScript">  function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        } </script>

Вот HTML, с которым он связан:

<nav>   <ul>
        <li class="ovr"><a href="#" onclick="toggle('hidden1');">Overview</a></li>
    </ul> </nav>


<div class="container"> <div id="hidden1">  <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#objectives">Objectives</a></li>
        <li><a href="#semestertopics">Semester Topics</a></li>
        <li><a href="#greenteaching">Green Teaching</a></li>
        <li><a href="#howtodowellinthiscourse">How to Do Well in this Course</a></li>
    </ul> </div>

Большое спасибо за помощь! Если я разместил вопрос, на который уже был дан ответ, я был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление - у меня нет всего словарного запаса, чтобы правильно искать ответ.


javascript html hidden visible
person scoob    schedule 09.02.2012    source источник
comment
stackoverflow.com/questions/2707100 /   -  person jamesfrullo    schedule 09.02.2012
comment
Вы можете увидеть ответы на этот вопрос о том, как выполнять события мыши в javascript: stackoverflow.com/questions/ 2206831/show-div-on-mouseover. Несмотря на то, что этот вопрос касался конкретно перемещения мыши, вы можете просто использовать те же примеры, но изменить «mousemove» на «mouseover», и это применимо.   -  person Roberto Linares    schedule 09.02.2012

Ответы (3)


arrow_upward
0
arrow_downward

Используйте событие onmouseover, чтобы активировать переключатель «показать».

http://www.w3schools.com/jsref/event_onmouseover.asp

<div id="hidden1" onmouseover="toggle('hidden1')">
person Timeout    schedule 09.02.2012
comment
Работает как шарм. Большое спасибо! - person scoob; 09.02.2012

arrow_upward
0
arrow_downward

Хотя это может быть немного по теме, пробовали ли вы библиотеку Jquery. Я думаю, что это намного надежнее и эффективнее, чем стандартный javascript.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Теперь о вашем вопросе. Дайте вашему href класс over следующим образом:

<a href="#" class="over">Overview</a>

Затем скройте свой блок текста в css. Как это:

#hidden1{
   display: none;
   }

Затем добавьте простой фрагмент jquery.

$(function(){
    $('.over').click(function(){
         $('#hidden1').toggle(); 
      }); 
  });

В отличие от javascript, это будет работать во всех браузерах, и я считаю, что Jquery очень прост и даже интересен в использовании. Для ваших целей JQuery определенно является хорошим вариантом.

person Tom    schedule 09.02.2012

arrow_upward
0
arrow_downward

w3school

используйте в коде «mouseover» вместо «onclick». это решит вашу проблему

person himanshu    schedule 28.08.2014