Jquery hover over one element & add a class to another

I would like to add the class DisplayPortfolioDescription to the element element that has the class PortfolioDescription when I hover over the link that has the class PortfolioLink. What’s interesting is that the code works fine when not using the hover over function (It adds the class on load)

<script>

    		$(function() {
    		$(".PortfolioDescription").addClass("DisplayPortfolioDescription");
    		console.log("dayumm");
    	});

    </script>

    <script>

    		$(".PortfolioLink").hover(function() {
    		$(".PortfolioDescription").addClass("DisplayPortfolioDescription");
    		console.log("dayumm");
    	});

    </script>


                <section id="LogoPortofolioPreview" class="col-xs-4 NoPaddingLeftandRight"> 
                    <a  class="PortfolioLink col-xs-12 NoPaddingLeftandRight" href="#">
                        <img class="col-xs-12 NoPaddingLeftandRight" src="<?php echo site_url(); ?>/wp-content/themes/connectfour2016/Assets/Images/Website-Design-Example-Bluepine-Homes.jpg" alt="Website Development Sample Bluepine Homes"/>
                        <div class="box-overlay">
                            <p class="text-center PreviewIcon">
                                <img class="NoPaddingLeftandRight PortfolioIcons" src="<?php echo site_url(); ?>/wp-content/themes/connectfour2016/Assets/Images/Website-Design-Icon-Small.png" alt="Website Development Sample Bluepine Homes"/>
                            </p>
                            <p class="PreviewText col-xs-12"> WEB DESIGN </p>
                            <p class="SeePortfolio"> SEE PORTFOLIO </p>
                            <p class="PortfolioDescription col-xs-12"> view our website development portfolio & see what kind of work we can do for you</p>
                        </div>
                    </a>
                </section><!--LogoPortfolioPreview-->

Hi,

Your js needs to follow in the html after the elements it refers to otherwise it won’t work properly. Move the js to the end of the html like so.

<script>

   		$(".PortfolioLink").hover(function() {
    		$(".PortfolioDescription").toggleClass("DisplayPortfolioDescription");
    		console.log("dayumm");
    	});

</script>
</body>
</html>

I’ve assumed you want toggleClass rather than addClass but change if that’s not correct.

However it looks to me as though this is a simple CSS effect and you can do that without any js.

e.g.

.PortfolioDescription{display:none}
.PortfolioLink:hover .PortfolioDescription {
	background:red;
	display:block
}

Of course it all depends exactly on what you are doing and whether you are adding other dynamic functionality.

1 Like

You’re right I did want to use toggle class and css was a better solution. I think I got stuck on the idea that I wanted to make this jQuery work. Why must the jQuery come after the html?

Try doing each of these following the steps exactly

  • bring an empty box into your room
  • remove the largest book from the box
  • place several books into the empty box

.

  • bring an empty box into your room
  • place several books into the empty box
  • remove the largest book from the box
2 Likes

I will play along. That seems redundant. Is it because the html must be fully loaded first? I asked the original question because I’ve had jQuery work just fine when at the top of the document.

It’s a matter of dependencies.
For a jQuery function to work, the jQuery library needs to be loaded
For a function to work with the DOM, the DOM needs to be loaded.

Yes, it can, as long as the code is not run until after the DOM has loaded in.

I guess it’s a matter of preference and efficiency to just put the functions before </body> instead of having onload / document.ready

1 Like

Of course with jQuery at the top it slows the loading of the content of the page for anyone who doesn’t already have that version of jQuery loaded so fewer people will stay long enough to see that content.

1 Like

It’s not just a matter of having people stick around. Your page loads significantly faster when comparing one technique to the other. I’m not normally one to prefer a technique just due to fractional improvements of speed, but when the improvement is significantly faster with no downside, it’s a no brainer.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.