Блог

Главная - Вопросы по программированию - Изменение положения изображения при наведении курсора мыши на другое изображение

Изменение положения изображения при наведении курсора мыши на другое изображение

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь сделать что-то вроде этого http://namesdublin.com / Изображения будут меняться в другое положение (с переходом) при наведении курсора мыши на фон milktea. Как мне добиться этого с помощью CSS или javascript? Я не могу добиться этого эффекта с помощью обычного css: hover .

 .milktea {
  background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
  display: table;
  height: auto;
  position: relative;
  width: 100%;
  background-size: cover;
  padding: 0;
  margin: 0;
}

.mtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 100px;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 900;
  font-style: normal;
}

.m1 {
  position: absolute;
  width: 150px;
  height: auto;
  top: 300px;
  left: 50px;
}

.m2 {
  position: absolute;
  width: 250px;
  height: auto;
  top: 100px;
  left: 150px;
  transform: rotate(-30deg);
}

.m3 {
  position: absolute;
  width: 250px;
  height: auto;
  top: 100px;
  left: 450px;
} 
 <div class="row">
  <div class="milktea col-lg-6 p-0" style="height: 800px;">

    <div class="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
    <div class="mtitle">MILKTEA</div>
    <div class="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
    <div class="m2"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
  </div>
</div>

Комментарии:

1. Я сделал вам фрагмент. Пожалуйста, объясните, как увидеть вашу проблему

2. Мне нужно, чтобы изображения m1 m2 m3 перемещались в разных направлениях при наведении курсора мыши на milktea,

3. По тексту или при пролистывании фона?

4. csspoint101.com/parallax-on-hover-effect-using-parallax-js

5. Вау! Я не могу отблагодарить вас достаточно. Узнайте что-то новое сегодня.

Ответ №1:

я взял ваш код и немного улучшил его, надеюсь, это поможет вам

     var m3 = document.getElementById('m3')
    var m1 = document.getElementById('m1')
    var m2 = document.getElementById('m2')
        
    var m1Top = 300
    var m1left =50

    var m1TopTemp
    var m1leftTemp

    var m1Verif = false
    var m2Verif = false
    var m3Verif = false

    
    var m2Top = 100
    var m2Transform =-30
    var m2left =150

    var m3Top = 100
    var m3left =450

    var hoverFrame
    var leaveFrame
    function hover() {
        clearInterval(leaveFrame);
        m1Verif=false
        m2Verif=false
        m3Verif=false
        hoverFrame = setInterval(frame, 5);
    }
    function leave() {
        clearInterval(hoverFrame);
        m1Verif=true
        m2Verif=true
        m3Verif=true
        leaveFrame = setInterval(frameReverse, 5);
    }
      function frame() {
        if(m1Top == 100 amp;amp; m1left==250){
            m1Verif = true
        }else{
            if(m1left!=250){m1left  ;}  
            if(m1Top!=100){m1Top--;}  
            m1.style.left = m1left   'px';
            m1.style.top = m1Top   'px'; 
        }

        if(m2Top == 100 amp;amp; m2left == 550 amp;amp; m2Transform == 0){
            m2Verif=true
        }else{
            if(m2left!=550){m2left  ;}  
            if(m2Transform!=0){m2Transform  ;} 
            m2.style.left = m2left   'px';
            m2.style.transform = 'rotate(' m2Transform 'deg)'; 
        }

        if(m3Top == 100 amp;amp; m3left == 895){
            m3Verif=true
        }else{
            if(m3left!=8950){m3left  ;} 
            m3.style.left = m3left   'px'; 
        }
        if(m1Verif==true amp;amp; m2Verif == true amp;amp; m3Verif == true){clearInterval(hoverFrame);}
    }
    
    function frameReverse() {
        if(m1Top == 300 amp;amp; m1left==50){
            m1Verif = false
        }else{
            if(m1left!=50){m1left--;}  
            if(m1Top!=300){m1Top  ;}  
            m1.style.left = m1left   'px';
            m1.style.top = m1Top   'px'; 
        }
        if(m2Top == 100 amp;amp; m2left == 150 amp;amp; m2Transform == -30){
            m2Verif=false
        }else{
            if(m2left!=150){m2left--;}  
            if(m2Transform!=-30){m2Transform--;} 
            m2.style.left = m2left   'px';
            m2.style.transform = 'rotate(' m2Transform 'deg)'; 
        }
        if(m3Top == 100 amp;amp; m3left == 450){
            m3Verif = false
        }else{
            if(m3left!=450){m3left--;} 
            m3.style.left = m3left   'px'; 
        }
        if(m1Verif == false amp;amp; m2Verif ==false amp;amp; m3Verif == false){clearInterval(leaveFrame);}
    } 
    .milktea {
      background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
      display: table;
      height: auto;
      position: relative;
      width: 100%;
      background-size: cover;
      padding: 0;
      margin: 0;
    }

    .mtitle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: xx-large;
        font-family: brandon-grotesque, sans-serif;
        font-weight: bold;
        font-style: normal;
    }
    .mtitle:hover {
        color:rgba(30, 144, 255,0.7);
        cursor: pointer;
    }
    .m1 {
      position: absolute;
      width: 150px;
      height: auto;
      top: 300px;
      left: 50px;
    }

    .m2 {
      position: absolute;
      width: 250px;
      height: auto;
      top: 100px;
      left: 150px;
      transform: rotate(-30deg);
    }

    .m3 {
      position: absolute;
      width: 250px;
      height: auto;
      top: 100px;
      left: 450px;
    }
    .m3A{
        background-color: red;
        animation-name: example;
        animation-duration: 4s;
    }
    @keyframes m3{
        100%{
            top:102px;
            left: 30%;
        }
    } 
 <div class="row">
      <div class="milktea col-lg-6 p-0" style="height: 800px;">

        <div class="m3" id="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
        <div class="mtitle" id="mtitle" onmouseover="hover()" onmouseleave="leave()">MILKTEA</div>
        <div class="m1" ID="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
        <div class="m2" ID="m2"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
      </div>
    </div>

Ответ №2:

вы можете использовать > селектор

 .milktea {
  background: url("https://my-test-11.slatic.net/p/89d20ca95994d8a252a6430c7b27e6fc.jpg") no-repeat center center;
  background :red;
  display: table;
  height: auto;
  position: relative;
  width: 100%;
  background-size: cover;
  padding: 0;
  margin: 0;
}

.mtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 100px;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 900;
  font-style: normal;
}

.m1 {
  position: absolute;
  width: 150px;
  height: auto;
  top: 300px;
  left: 50px;
}

.m2 {
  position: absolute;
  width: 250px;
  height: auto;
  top: 100px;
  left: 150px;
  transform: rotate(-30deg);
}

.m3 {
  position: absolute;
  width: 250px;
  height: auto;
  top: 100px;
  left: 450px;
}

#milktea:hover>#second{
  animation-name: move;
  animation-duration: 2s;
  animation-fill-mode: forwards;

}
@keyframes move {
   
 100%{left: calc(150px   200px);} //original left   offset or use translateX 
 but override rotation
} 
 <div class="row">
  <div id="milktea" class="milktea col-lg-6 p-0" style="height: 800px;">

    <div class="m3"><img src="https://cdn.shopify.com/s/files/1/0026/7947/2175/products/jazzy-boba-avatar_2310088d-5c68-455c-810f-357227f83d3c_300x300.jpg" alt="" /></div>
    <div class="mtitle">MILKTEA</div>
    <div class="m1"><img src="https://images-na.ssl-images-amazon.com/images/I/61ECxeh86rL._CR0,179,921,921_UX256.jpg" alt="" /></div>
    <div class="m2" id="second"><img src="https://images-na.ssl-images-amazon.com/images/I/61iMmwHrY5L._CR0,204,1224,1224_UX256.jpg" alt="" /></div>
  </div>
</div>