試圖使div元素在懸停另一個元素時移動

Question

所以：我要實現的目的是，我需要以某種方式讓點容器div元素在.title-container div元素懸停的同時移動。 在這段代碼的腳本部分中，我嘗試使用“ onmouseover”和“ onmouseout” javascript事件來執行此操作，然后更改top屬性，但是它不起作用！ 我也嘗試過使用translate（）方法而不是top屬性，也不起作用！ 請注意，我對jquery不熟悉，所以我更喜歡沒有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>

Answer 1

只需先包含jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

然后

$(".title-container").hover(function() {
   alert('on hover');
}, function() {
   alert('on hover out');   
});

沒有jQuery

var title  = document.querySelector('.title-container');
title.addEventListener('mouseenter', function(){

});

試圖使div元素在懸停另一個元素時移動

問題描述

1 個解決方案

解決方案1
0 已采納 2018-12-22 10:45:31

試圖使div元素在懸停另一個元素時移動

問題描述

1 個解決方案

解決方案1 0 已采納 2018-12-22 10:45:31

解決方案1
0 已采納 2018-12-22 10:45:31