показанное изображение только после наведения мыши 2 раза? - PullRequest
Новая
       14

показанное изображение только после наведения мыши 2 раза?

0 голосов
/ 21 ноября 2018

Это очень простой код 

 <img src="images/Card.png" id=I1 class="img"/> 
 <img src="images/Card.png" id=I2 class="img"/> 
 <img src="images/Card.png" id=I3 class="img"/> 
 <img src="images/Card.png" id=I4 class="img"/> 

 <img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
 <img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
 <img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
 <img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />

<script>
 $('.img').mouseover(function() {

        var GetId = this.id.substring(1);

        $("#I" + GetId).hover(
        function () { $("#myImage" + GetId ).show();  },
        function () { $("#myImage" + GetId ).hide();  }  ); 

    });
</script>

Он работает нормально, но у него есть одна проблема, вам нужно навести курсор мыши более 2 раз для отображения изображения.

Google проблема, но нет решения.

Может ли кто-нибудь помочь?

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Вы можете упростить свою логику и устранить проблему в процессе, используя поле данных на изображениях при наведении курсора. 

$('.img')
  .on('mouseenter', function(){
    $('#'+ $(this).data('target')).show();
  })
  .on('mouseleave', function(){
    $('#'+ $(this).data('target')).hide();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />

<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />
0 голосов
/ 21 ноября 2018

ЕСЛИ вы можете сгруппировать изображения вместе, используйте чистую CSS.Если нет, воспользуйтесь ответом Таплара.Пример:

html: 

<!-- repeat for all your images -->
    <div class="image-wrapper">
    <img class="img">
    <img class="image-on-hover">
    </div>

CSS: 

.image-on-hover{
display:none
}

.img:hover ~.image-on-hover{
display: block
}

Объяснение: Селектор: hover в CSS будет срабатывать при наведении на элемент.С помощью селектора ~ вы можете выбрать дочерний элемент на том же уровне (вы можете назвать его «соседний элемент»).Поскольку мы не хотим отображать все соседние изображения при наведении, мы объединяем пары изображений и изображений при наведении вместе

Другой вариант, если ваша группировка точно такая же, как в примере: 

.image-on-hover{
display: none;
}

/*repeat for every image pair */

#I1:hover ~ #myImage1{
display:block
}
...