seo Question posted in
Some basic information to get you started with this can be found here.

Trying to change the Background of section when hover is done to particular block (div) [working] – SEO

when i hover the block (div) the background of that entire section to be changed., totally 4cards & 4 images to be changed

classes are seo-program-01, seo-program-02, seo-program-03, seo-program-04 for the blocks (div),
class of the section is seo-programs-section (which the BG to be changed)

Image portraits Section with Cards / Blocks

and here goes the code (Fixed and the Code works good for me),

document.getElementsByClassName("seo-program-01")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://mywebsite.com/wp-content/uploads/2021/04/search-marketing-services-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-02")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://mywebsite.com/wp-content/uploads/2021/04/seo-program-success-analytics-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-03")[0].addEventListener("mouseover", function() {
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://mywebsite.com/wp-content/uploads/2021/04/optimized-press-release-services-slider-home.png)";
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
  document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

document.getElementsByClassName("seo-program-04")[0].addEventListener("mouseover", function() {
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://mywebsite.com/wp-content/uploads/2021/04/social-media-managememnt-services-slider-home.png)";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundRepeat = "no-repeat";
   document.getElementsByClassName("seo-programs-section")[0].style.backgroundPosition = "160% 50%"; 
}, false);

Error at console :

Uncaught TypeError: document.getElementByClassName is not a function
    at HTMLHeadingElement.<anonymous> ((index):1403)
Tags:

2

Answers


  1. 0

    You appear to have two simple typos.

    document.getElementsByClassName("seo-program-01")[0].addEventListener("mouseover", function() {
    document.getElementByClassName("seo-programs-section")[0].style.backgroundImage = "url(https://website.com/wp-content/uploads/2021/03/seo-program-success-analytics-slider-home.png)";
                      ^^
}, false);

document.getElementsByClassName("seo-program-02")[0].addEventListener("mouseover", function() {
    document.getElementByClassName("seo-programs-section").style.backgroundImage = "url(https://website.com/wp-content/uploads/2021/03/optimized-press-release-services-slider-home.png)";
                      ^^
}, false);

    The method you’re trying to invoke is called getElementsByClassName, with an S after the word Element, yet you have written getElementByClassName twice within your event functions.

    Next time when a piece of JavaScript code isn’t working the way you expect it to, try looking at the console log of your browser.

    In this case you would have seen an error similar to this;

    Uncaught TypeError: document.getElementByClassName is not a function
at HTMLDivElement.<anonymous>

    As an extra note; If you want the background to only be visible when the mouse is hovering over the element [ and revert back to normal when it isn’t ], and depending on your HTML structure, you could have done the above through some simple CSS.

    Login or Signup to reply.
  2. 0

    Try this :

    JS –

    var firstelemnt = document.querySelector('.seo-program-01');

firstelemnt.addEventListener('mouseover', changeBgClassOver);
firstelemnt.addEventListener('mouseout', changeBgClassOut);

function changeBgClassOver(e) {
  e.target.classList.toggle('bg-toggle-1');
}

function changeBgClassOut(e) {
  e.target.classList.toggle('bg-toggle-1');
}

    css :

    .bg-toggle-1{
    background-image: url(https://website.com/wp-content/uploads/2021/03/seo-program-success-analytics-slider-home.png);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search