Добавление состояния «onmouseover» в код Javascript - PullRequest
Новая
       69

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

0 голосов
/ 09 февраля 2012

Я пока не могу написать код 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>

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

Ответы [ 3 ]

0 голосов
/ 09 февраля 2012

Хотя это может быть немного темой, вы пробовали библиотеку 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 - хороший вариант.

0 голосов
/ 28 августа 2014

w3school

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

0 голосов
/ 09 февраля 2012

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

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

<div id="hidden1" onmouseover="toggle('hidden1')">
...