更改鏈接懸停部分的背景圖片

Question

當鏈接被懸停時，我試圖更改部分的背景圖像，該圖像留在鼠標上，保留默認的部分圖像。 雖然我非常精通html，css和一些php，但我不擅長JS。

我在這里已經找到了多個答案，但似乎都沒有用。

我努力了

更改鏈接懸停時的背景圖片

並且

在導航欄懸停時更改div的背景圖像

我的HTML結構是這樣的-我第一次使用了高級自定義字段，因此我的結構與通常的結構有所不同。

<div class="projects-section">

<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-a" class="project-a-class" href="link">Project A</a>
</p>
</h3>
</div>

<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-b" class="project-b-class" href="link-2">Project B</a>
</p>
</h3>
</div>

</div>

等等，最多5個鏈接。

目前我擁有的JS是

$(document).ready(function(){
    $("a.project-a-class#project-a").mouseover(function(){
        $(.projects-section).css("background-image", "url('/wp-content/uploads/2019/07/project-A.jpg')");
    });
});

但這是行不通的。

最后一點-我是第一次使用下划線，並且沒有鏈接任何jquery庫腳本-我是否需要添加這些才能使其正常工作？ 如果是這樣，在Wordpress中添加這些內容的最佳方法是什么。

謝謝

Answer 1

在選擇器$(.projects-section) ，引號缺失。 在選擇a.project-a-class#project-a可以選擇與元素id I：E a.#project-a ，不需要類名。

 const defaultImg = "https://placeimg.com/640/480/nature"; const newImg = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"; $('a#project-a') .on('mouseover', function() { $('.projects-section').css('background-image', "url(" + newImg + ")"); }) .on('mouseout', function() { $('.projects-section').css('background-image', "url(" + defaultImg + ")"); }); 

 .projects-section { background-repeat: no-repeat; background-size: 100%; background-image:url("https://placeimg.com/640/480/nature"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="projects-section"> <div class="stacked-project-list-item"> <h3> <p> <a id="project-a" class="project-a-class" href="link">Project A</a> </p> </h3> </div> <div class="stacked-project-list-item"> <h3> <p> <a id="project-b" class="project-b-class" href="link-2">Project B</a> </p> </h3> </div> </div> 

Answer 2

您可以使用CSS來預加載圖片，並避免將鼠標懸停在鏈接后第一次加載圖片的時間

 $('a#project-a').hover(function() { $('.projects-section').toggleClass('hovered'); }) 

 .projects-section { background-repeat: no-repeat; background-size: 100%; background-image:url("https://placeimg.com/640/480/nature"), url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"); } .projects-section.hovered { background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="projects-section"> <div class="stacked-project-list-item"> <h3> <p> <a id="project-a" class="project-a-class" href="link">Project A</a> </p> </h3> </div> <div class="stacked-project-list-item"> <h3> <p> <a id="project-b" class="project-b-class" href="link-2">Project B</a> </p> </h3> </div> </div>