Enable Hover by javascript

Question

Enable Hover by javascript

Navigation

#1 by (2 votes)

0

Hello everyone, it's the following:

I've created an html that contains an image, a text and a button;
The image has a transition that makes the image rise to some extent;
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 text are executed and a video is shown where the image and text were.

The 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>

javascript html5 css3

asked by anonymous 14.11.2016 / 17:44

1 answer

Hide form when pressing key Error creating Wordpress post

score 2 · Accepted Answer

If it is a distinct element, "id" is used (#), if it is a generic aspect, "class" (.) is used. If I understood the question well, in a case of hiding / showing the video at 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>Yourbrowserdoesnotsupportthe<code>video</code>element.</video><h1id="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: link