Использование обоих onmouseover и onmouseout для расширения контейнера - PullRequest
Новая
       72

Использование обоих onmouseover и onmouseout для расширения контейнера

0 голосов
/ 17 апреля 2020

Я пытаюсь использовать JavaScript и HTML события «onmouseover» и «onmouseout» для расширения и сжатия контейнера. В основном, когда мышь не зависает, это просто заголовок, но когда мышь находится над заголовком, она расширяется и отображает дополнительную информацию.

Как и в примере ниже, я могу развернуть и отобразить дополнительный текст с добавленной информацией о велосипеде. 

    <div class="content" onmouseover="document.getElementById('Bicycle_Text').style.display='block'">
      <h1>The Bicycle</h1> 
      <p id="Bicycle_Text" style="display:none">Bicycles were first introduced in the 19th century in Europe.</p>
    </div>

Однако я бы хотел, чтобы деление вернулось в исходное нерасширенное состояние, когда мышь перемещается из деления. Я бы сделал это с помощью события «onmouseout» и изменил бы Javascript на display = 'None'. Я не уверен, как использовать оба события "onmouseover" и "onmouseout" в одной строке текста.

Есть ли какие-либо предложения о том, как мне это сделать или даже совершенно по-другому? Мне известна функция наведения CSS, но я не могу понять, как она будет расширяться, как эта в настоящее время. Спасибо!

1 Ответ

0 голосов
/ 17 апреля 2020 
    function increase()
    {
        clearInterval(intervalid);
         intervalid=setInterval(zoomin,10);

    }
    function zoomin()
    {

        if(width<400){
            width=width+difference;
            document.getElementById("img1").style.width=width;
        }
        else{
            clearInterval(intervalid);
        }

    }
    function decrease()
    {
        clearInterval(intervalid);
        intervalid=setInterval(zoomout,10);
    }
    function zoomout()
    {

        if(width>300){
            width=width-difference;
            document.getElementById("img1").style.width=width;
        }
        else{
            clearInterval(intervalid);
        }

    }


<body>
    <img id=img1 onmouseover="increase()" onmouseout="decrease()" src=cah4.jpg  width="450">

...