So: the thing I'm trying to achieve is that I somehow need to get the dot-container div element to move at the same time when the .title-container div element is hovered. In the script section of this code, i tried to do this with the "onmouseover" and "onmouseout" javascript event and then changing the top attribute, but it somehow doesnt work! I've also tried using translate() method instead of the top attribute, doesnt work either! Please note that i am not familiar with jquery, so i would prefer solutions without jquery.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top 8 of Europe</title>
<link rel="icon" href="europe.ico">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: block;
margin: 0;
padding: 0;
font-family: georgia;
background: #333333;
}
.title-h1 {
text-align: center;
font-family: georgia;
color: #cccccc;
}
.title-blockquote {
font-style: italic;
color: #cccccc;
}
hr.title-hr{
border-style: solid;
border-color: #cccccc;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
}
.center-img {/* Alle Titelbilder der Slides */
display: block;
position: absolute; /* position: absolute erlaubt nachher im inline styletag des einzelnen bildes eine benutzerdefinierte ausrichtung */
width: 100%;
}
/* Slideshow behaelter */
.slideshow-container {
width: 100%;
height: 3000px;
margin: auto;
}
.image-container {
position: absolute;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.title-container {
position: absolute;
display: block;
height: 35vh;
width: 20vw;
top: 40vh;
left: 40vw;
padding: 40px;
background: #333333;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
transition: transform 0.5s ease;
}
.title-container:hover {/* Beim Hovern kann man das Hintergrundbild sehen */
background: transparent;
transform: translate(0,-10vh);
}
.title-container:hover * {/* Die schriftfarbe wird hierbei ebenfalls geaendert */
color: black;
}
.title-container:hover h1 {
color: transparent;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0px 3px;
background-color: #999999;
border-radius: 50%;
transition: background-color 0.6s ease;
user-select: none;
}
#dot-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
width: 20vw;
top: 63vh;
left: 40vw;
background: transparent;
transition: transform 0,5s ease;
}
.active, .dot:hover {
background: white;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="image-container">
<img class="center-img" style="top: -15vh;" src="sansebastian.jpg">
<div class="title-container">
<h1 class="title-h1">8. San Sebastian</h1>
<hr class="title-hr">
<blockquote class="title-blockquote">
"San Sebastian - this city is well-known for its amazingly tasty "Tapas" and attracts a lot of tourists due to
the sunny weather and its location at the atlantic ocean. This is the place for you!"
</blockquote>
</div>
</div>
</div>
<div id="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
<div class="dot" onclick="currentSlide(4)"></div>
<div class="dot" onclick="currentSlide(5)"></div>
<div class="dot" onclick="currentSlide(6)"></div>
<div class="dot" onclick="currentSlide(7)"></div>
<div class="dot" onclick="currentSlide(8)"></div>
<div class="dot" onclick="currentSlide(9)"></div>
</div>
<!-- sidebar -->
</div>
document.getElementsByClassName("title-container").onmouseover = function mouseOver() {
document.getElementById("dot-container").style.top = "53vh";
}
document.getElementsByClassName("title-container").onmouseout = function mouseOut() {
document.getElementById("dot-container").style.top = "63vh";
}
</script>
</body>
</html> Just include jQuery first
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then
$(".title-container").hover(function() {
alert('on hover');
}, function() {
alert('on hover out');
});
Without jQuery
var title = document.querySelector('.title-container');
title.addEventListener('mouseenter', function(){
});