Enable Hover by javascript

Asked

Viewed 701 times

0

Hey, guys, here’s the deal:

  • I created an html that contains an image, a text and a button;
  • The image has a Transition that makes the image rise to a certain point;
  • Text has an opacity when I hover over it;

What I need is that when I click the button the actions of the image, and the text are executed and a video is shown in the place where the image and the text were.

HTML looks something like this

<div class="center-natal">
            <div class="animationNatal">
                <img class="logoNatal" src="img.png" alt="" title="" />
                <h1 class="titNatal">MOMENTOS QUE MARCAM...<br><span>TRADIÇÕES QUE FICAM!</span></h1>
            </div>
            <a href="#" class="btn-assita-natal">ASSISTA AO FILME</a>
        </div>

1 answer

2


If it is a distinct element, normally "id" (#) is used, if it is a generic aspect, "class" (.) is used. If I understood the question correctly, in a case to hide/show the video with the click of a button:

Then to:

<div class="center-natal">
            <div class="animationNatal">
                <img id="logoNatal" src="http://placehold.it/350x150" alt="" title="" />
             <video id="vid" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>
                <h1 id="titNatal">MOMENTOS QUE MARCAM...<br><span>TRADIÇÕES QUE FICAM!</span></h1>
            </div>
            <a id="link"href="#" class="btn-assita-natal">ASSISTA AO FILME</a>
        </div>

In pure JS:

document.getElementById("link").onclick = function play(){
  var tit = document.getElementById("titNatal");
  var logo = document.getElementById("logoNatal");
  var vid = document.getElementById("vid");

   if(logo.style.display === 'none')
    {
      logo.style.display = 'block';
      tit.style.display = 'block';
      vid.style.display = 'none';
    }
    else
    {
      logo.style.display = 'none';
      tit.style.display = 'none';
      vid.style.display = 'block';
    }
}

Here is an example: http://codepen.io/tomasMetcalfe/pen/aBZmKG

Browser other questions tagged

You are not signed in. Login or sign up in order to post.