OnMouseUp + h2 не работает

Question

мне нужна помощь здесь:

Я пытаюсь перейти на другую страницу, когда я нажимаю на последний элемент h2, но то, что происходит в том, что он работает со всеми элементами h2.

Вот вещь:

<script> 
    function ini(){ 
     document.location.href='home.php'; 

     } 
</script> 

элементы:

<h2>Inove.</h2> 
    <h2>Evolua.</h2> 
<h2>Apareça.</h2> 
<h2 onMouseUp="ini()">Destaque-se.</h2> 

---

, что внутри этого DIV:

<div class="os-phrases" id="os-phrases"> 
<h2>Inove.</h2> 
<h2>Evolua.</h2> 
<h2>Apareça.</h2> 
<h2>Destaque-se na</h2> 
<h2>V1TR1NE.com.br</h2> 
<h2></h2> 
<h2></h2> 
<h2 onMouseUp="ini()">Iniciar...</h2> 
</div> 

и Css рассматривать его как ребенка.

.os-phrases h2 { 
    font-family: 'Dosis', 'Lato', sans-serif; 
    font-size: 70px; 
    font-weight: 200; 
    width: 100%; 
    overflow: hidden; 
    text-transform: uppercase; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    letter-spacing: 14px; 
    text-align: center; 
} 

.os-phrases h2, 
.os-phrases h2 > span { 
    height: 100%; 
    /* Centering with flexbox */ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
} 

.os-phrases h2 > span { 
    margin: 0 15px; 
} 

.os-phrases h2 > span > span { 
    display: inline-block; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    perspective: 1000px; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
} 

.os-phrases h2 > span > span > span { 
    display: inline-block; 
    color: hsla(0,0%,0%,0); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-animation: OpeningSequence 5.2s linear forwards; 
    -moz-animation: OpeningSequence 5.2s linear forwards; 
    animation: OpeningSequence 5.2s linear forwards; 
} 

.os-phrases h2:nth-child(2) > span > span > span { 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    animation-delay: 5s; 
} 

.os-phrases h2:nth-child(3) > span > span > span { 
    -webkit-animation-delay: 10s; 
    -moz-animation-delay: 10s; 
    animation-delay: 10s; 
} 

.os-phrases h2:nth-child(4) > span > span > span { 
    -webkit-animation-delay: 15s; 
    -moz-animation-delay: 15s; 
    animation-delay: 15s; 
} 

.os-phrases h2:nth-child(5) > span > span > span { 
    font-size: 150px; 
    -webkit-animation-delay: 21s; 
    -moz-animation-delay: 21s; 
    animation-delay: 21s; 
    -webkit-animation-duration: 8s; 
    -moz-animation-duration: 8s; 
    animation-duration: 8s; 
} 

.os-phrases h2:nth-child(6) > span > span > span { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
} 

.os-phrases h2:nth-child(7) > span > span > span { 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    animation-delay: 1s; 
} 

@-webkit-keyframes OpeningSequence { 
    0% { 
     text-shadow: 0 0 50px #fff; 
     letter-spacing: 80px; 
     opacity: 0; 
     -webkit-transform: rotateY(-90deg); 
    } 
    50% { 
     text-shadow: 0 0 1px #fff; 
     letter-spacing: 14px; 
     opacity: 0.8; 
     -webkit-transform: rotateY(0deg); 
    } 
    85% { 
     text-shadow: 0 0 1px #fff; 
     opacity: 0.8; 
     -webkit-transform: rotateY(0deg) translateZ(100px); 
    } 
    100% { 
     text-shadow: 0 0 10px #fff; 
     opacity: 0; 
     -webkit-transform: translateZ(130px); 
     pointer-events: none; 
    } 
} 

@-moz-keyframes OpeningSequence { 
    0% { 
     text-shadow: 0 0 50px #fff; 
     letter-spacing: 80px; 
     opacity: 0.2; 
     -moz-transform: rotateY(-90deg); 
    } 
    50% { 
     text-shadow: 0 0 1px #fff; 
     letter-spacing: 14px; 
     opacity: 0.8; 
     -moz-transform: rotateY(0deg); 
    } 
    85% { 
     text-shadow: 0 0 1px #fff; 
     opacity: 0.8; 
     -moz-transform: rotateY(0deg) translateZ(100px); 
    } 
    100% { 
     text-shadow: 0 0 10px #fff; 
     opacity: 0; 
     -moz-transform: translateZ(130px); 
     pointer-events: none; 
    } 
} 

@keyframes OpeningSequence { 
    0% { 
     text-shadow: 0 0 50px #fff; 
     letter-spacing: 80px; 
     opacity: 0.2; 
     transform: rotateY(-90deg); 
    } 
    50% { 
     text-shadow: 0 0 1px #fff; 
     letter-spacing: 14px; 
     opacity: 0.8; 
     transform: rotateY(0deg); 
    } 
    85% { 
     text-shadow: 0 0 1px #fff; 
     opacity: 0.8; 
     transform: rotateY(0deg) translateZ(100px); 
    } 
    100% { 
     text-shadow: 0 0 10px #fff; 
     opacity: 0; 
     transform: translateZ(130px); 
     pointer-events: none; 
    } 
} 

.os-phrases h2:nth-child(8) > span > span > span { 
    font-size: 30px; 
    -webkit-animation: FadeIn 4s linear 28s forwards; 
    -moz-animation: FadeIn 4s linear 28s forwards; 
    animation: FadeIn 4s linear 28s forwards; 
} 

@-webkit-keyframes FadeIn { 
    0% { 
     opacity: 0; 
     text-shadow: 0 0 50px #fff; 
    } 
    100% { 
     opacity: 0.8; 
     text-shadow: 0 0 1px #fff; 
    } 
} 

@-moz-keyframes FadeIn { 
    0% { 
     opacity: 0; 
     text-shadow: 0 0 50px #fff; 
    } 
    100% { 
     opacity: 0.8; 
     text-shadow: 0 0 1px #fff; 
    } 
} 

@keyframes FadeIn { 
    0% { 
     opacity: 0; 
     text-shadow: 0 0 50px #fff; 
    } 
    100% { 
     opacity: 0.8; 
     text-shadow: 0 0 1px #fff; 
    } 
} 

/* Bold words */ 
.os-phrases h2:first-child .word3, 
.os-phrases h2:nth-child(2) .word2, 
.os-phrases h2:nth-child(4) .word1 { 
    font-weight: 600; 
} 

Я пытался использовать его в качестве ссылки, но я не мог заставить его работать. Окончательный эффект заканчивается в этой строке (.os-фразы h2: nth-child (8)> span> span> span). Здесь останавливается «Iniciar ...», и я хочу сделать это событие нажатием, чтобы взять меня на страницу home.php.

Answer 1

Как выглядит CSS? Я думаю, проблема там где-то. Поскольку следующий HTML отлично работает для меня: окно сообщения только появляется, когда я нажимаю последнюю запись:

<script> 
function ini(){ 
    alert('test'); 
} 
</script> 
<h2>Inove.</h2> 
<h2>Evolua.</h2> 
<h2>Apareça.</h2> 
<h2 onMouseUp="ini()">Destaque-se.</h2> 

Я проверил это с Chrome и Safari. Это не очень хорошо HTML (на самом деле это довольно плохо), но это делает работы.