I am trying to change the background image for a section when a link is hovered, the image leaving on mouse out, leaving the default section image. While I am very proficient in html, css, and some php, I am not in JS.
I have looked though multiple answers on here but none seem to work.
I have tried
Change background image on link hover
And also
Change Background image of div on navbar hover
My HTML Structure is like so - I am using Advanced custom fields (for the first time) so my structure is a bit different then I would usually have.
<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>
and so on up to 5 links.
Currently the JS I have is
$(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')");
});
});
But it doesn't work.
On a final note - I am using underscores for the first time and have not linked up any jquery library scripts - do I need to add these for this to work? If so, what is the best way to add these in Wordpress.
Thanks
In the selector $(.projects-section)
, quotes are missing. In the selector a.project-a-class#project-a
you can select element with id
i:e a.#project-a
, className is not required.
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>
You can use CSS, to preload image and avoid lag of first loading image after hovering link
$('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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.