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-->
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?
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
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.
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.