дисплей: нет;Показывает в любом случае?Также, как заставить анимацию играть при наведении - PullRequest
Новая
       8

дисплей: нет;Показывает в любом случае?Также, как заставить анимацию играть при наведении

0 голосов
/ 30 сентября 2018

Я хочу, чтобы "display: none" #firstoverlay работал.Я не хочу, чтобы синий цвет отображался до тех пор, пока ход не зависнет над «первым» делителем.

Также, как я могу сделать анимацию для #line воспроизведения, когда мышь тоже наводит курсор на #first и не играет правильнопрочь. 

<script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function on() {
    document.getElementById("firstoverlay").style.display = "block";
}

function off() {
    document.getElementById("firstoverlay").style.display = "none";
}


</script>
.fluid-container
{
background: red;
}
.remove-padding 
{
padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0
} 
.underline
{
text-decoration: underline;
}
#firstoverlay
{
position: absolute; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: red;
opacity: 0.5;
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
}
#firstoverlay2
{
position: absolute;
top: 0; 
left: 0;
right: 0;
bottom: 0;
z-index:3;
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#line
{
width: 0px;
height: 10px;
margin-bottom: 10px;
border-bottom: 1px solid purple;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: linegrow;
animation-duration: 4s;
animation-play-state: running;
}

@keyframes linegrow {
    0%   {width: 0px;}
    100% {width: 200px;}
}
<div class="fluid-container">
<div class="row remove-padding">

<div id="first" class="col" onmouseover="on();" onmouseout="off();">
 
 
 <div id="firstoverlay" >
 </div>
 
 
 <div id="firstoverlay2" >
 <span>Your Business Online</span>
 <div id="line"></div>
 <span>View Our Services</span>
 </div>
 
 
  

</div>


<div id="second" class="col "></div>
</div>

Я попытался добавить: document.getElementById ("line"). Style.animation-play-state = "running";к функции on (), но она не работает для анимации.

...