使用javascript在文本悬停时显示摘要块中的图像

如何解决使用javascript在文本悬停时显示摘要块中的图像

我在Squarespace工作，是Java和HTML的新手。

在下面的屏幕截图中，您可能会看到我正在尝试创建一种效果，当您将鼠标悬停在左侧标题之一上时，摘要块中右侧的图像会发生变化。由于我正在学习，因此我为标题创建了一个代码块，并在其中包含了一个javascript。我为与照片相对应的每个标题分配了一个ID号。但是我只是不知道如何使它工作。所有信息均来自期望其他网站并查看其使用的代码。有人可以帮我解决我的问题-可能是各种各样的事情：-（

enter image description here

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
 $( window ).ready(function() {
                   var screenRes = $(window).width();
               $(window).resize(function () {
                screenRes = $(window).width();
        });
        setTimeout(function(){
            if (screenRes >= 768) {
                jQuery('.summary-item-list .summary-item').each(function(){
                    var ids = jQuery(this).attr('id');
                    console.log(ids);
                    $(this).find('.summary-title').attr('data-id',ids);
                    var link = $(this).find('.summary-title-link').attr('href');
                    if (typeof link !== 'undefined') {
                        $(this).find('.summary-title a').wrapInner('<span></span>');
                    }
                    else {
                        $(this).find('.summary-title').wrapInner('<span></span>');
                    }
                    $(this).find('.summary-title').appendTo('.gallery-titles');
                });
                jQuery('.gallery-titles .summary-title:first-of-type').addClass('active');
                var dataid = $('.gallery-titles .summary-title:first-of-type').data('id');
                var link = $('#' + dataid + ' .summary-title-link').attr('href');
                $('#' + dataid).addClass('active');

                jQuery('.gallery-titles .summary-title').on("mouSEOver",(function(){
                    jQuery('.gallery-titles .summary-title').removeClass("active");
                    jQuery('.summary-item').removeClass("active");
                    $(this).addClass('active');
                    var dataid = $(this).data('id');
                    console.log(dataid);
                    $('#' + dataid).addClass('active');
                }))
            }
            },200);
     if (screenRes < 768) {
         $('.summary-item-list').slick({
             slide: '.summary-item',infinite: true,centerMode: false,slidesToShow: 1,autoplay: false,dots: false,fade: true,cssEase: 'linear',lazyLoad: 'ondemand',});
     }
});
</script>

<div class="gallery-titles">
  

<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11534">
  <a href="/blog/tempus-blandit" class="summary-title-link">
    <span>Tempus blandit</span>
  </a>
</div>
  
  <div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11536">
  <a href="/blog/Tempus-porttitor" class="summary-title-link">
    <span>Tempus porttitor</span>
  </a>
</div>
  
  <div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11538">
  <a href="/blog/Curabitur-blandit" class="summary-title-link">
    <span>Curabitur blandit</span>
  </a>
</div>

  <div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11540">
  <a href="/blog/Curabitur-blandit-tempus-porttitor" class="summary-title-link">
    <span>Curabitur blandit tempus porttitor</span>
  </a>
</div>


</div>

解决方法

这是一个不错的纯CSS解决方案：

p {
  font-family: sans-serif;
}
p:hover {
  color:red;
}
#image {
  position: absolute;
  right:1vw;
  top:0;
  width: 70vw;
  height:40vh;
}
#a:hover ~ #image {
  background: url("x") red;
}
#b:hover ~ #image {
  background: url("y") green;
}
#c:hover ~ #image {
  background: url("z") blue;
}

<p id="a">Image Description 1</p>
<p id="b">Image Description 2</p>
<p id="c">Image Description 3</p>
<img id="image" />

您当然应该替换

background: url("y") green;

使用

background: url("/path/to/image/");