I am currently experiencing an issue where only the first mp4 file is working properly, while the second one does not. I am considering removing the stylesheet part as it is proving to be difficult for me to handle. I lack the skills to implement other solutions that have been suggested by others, so I am reaching out for help.
index.html:
<div class="main-container">
<div class="video-container">
<video src="honda/honda adv.mp4"></video>
<div class="hover-text active"><b>Autoturisme</b></div>
</div>
</div>
<script src="main1.js"></script>
<div class="main-container">
<div class="video-container">
<video src="honda/honda engine.mp4"></video>
<div class="hover-text active"><b>Motoare</b></div>
</div>
</div>
<script src="main2.js"></script>
style1.css (currently identical to style2.css):
.main-container {
position: relative;
width: 400px;
top: -350px;
left: -550px;
margin: 40px auto;
font-family: "Roboto", sans-serif;
border-radius: 10px;
}
.video-container {
position: relative;
}
.video-container video {
width: 100%;
}
.video-container .hover-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 24px), -50%);
background: #ff0019;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
pointer-events: none;
box-shadow: 4px 4px 50px -4px rgba(0, 0, 0, 0.8);
opacity: 0;
letter-spacing: 0.8px;
transition: all 400ms ease;
}
.video-container .hover-text.active {
opacity: 1;
letter-spacing: 0;
transform: translate(-50%, -50%);
}
main1.js (same code as main2.js):
const video = document.querySelector(".video-container video");
const hoverText = document.querySelector(".video-container .hover-text");
video.addEventListener("mouseenter", () => {
video.play();
hoverText.classList.remove("active");
});
video.addEventListener("mouseleave", () => {
video.pause();
hoverText.classList.add("active");
});