试图让 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 元素在悬停另一个元素时移动

Trying to get div element to move while hovering another one

html

javascript

transform

onmouseover

translate