Change Section background image on link hover

Question

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

you are missing quotes `$(".projects-section")` – Akhilesh Jul 20 '19 at 17:46 — Akhilesh, Jul 20 '19 at 17:46

random · Answer 1 · 2019-07-21T03:11:30.093

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>

Okay thats great - only thing is there is a lag on the image loading, it loads top half then bottom. is there a way to load these images on pageload so they are ready to go? And can I change the background colour at the same time? Also not to ask too much, but is it possible to add a transition so it fades in and out to take the edge off? Thanks so much! — Mr Toad, Jul 20 '19 at 21:50
@MrToad - The background image repeats, add css `background-repeat: no-repeat;` . Yes you can add transition effect. See edit. — random, Jul 21 '19 at 03:17

score 0 · Answer 2 · answered Jul 22 '19 at 08:45

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>

Change Section background image on link hover

2 Answers2