I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item.
CodePen Example
Currently, my code displays all text. I only want to display the H1 & P text within the class name .spot_titles: https://codepen.io/example123/
To better illustrate what I'm aiming for:
When hovering over an item like Acne or Oiliness, the headline and text should change accordingly. This represents the active state and my desired outcome:
JavaScript
// Retrieving the original content
var main_url = $(".index__hero-image").css('background-image');
var main_title = $(".index__hero-image h1").text();
var main_text = $(".index__hero-image p").text();
$(".index__spot").hover(function () {
var image_url = $(this).css('background-image');
// Adjusting the variables here may be needed.
var spottitle = $(this).text();
var spottext = $(this).text();
$(".index__hero-image").css('background-image', image_url);
$(".index__hero-image h1").text(spottitle);
$(".index__hero-image p").text(spottext);
},
function() {
// Reverting to original content when not hovered
$(".index__hero-image").css('background-image', main_url);
$(".index__hero-image h1").text(main_title);
$(".index__hero-image p").text(main_text);
});
HTML
<div class=" index__text-block">
<h1>Original headline</h1>
<p>Original text block goes here</p>
</div>
<div class="solutions-bar">
<a href="acne.html" class="index__spot" style="background-image: url('http://placeexample.com/700/700');">
<!-- Ignore next 3 lines / Create the icon in the link list -->
<img src="icon.png">
<h6 class="content-1">Acne</h6>
<h6 class="content-2">Shop Now</h6>
<!-- Use this text to replace that in index__text-block -->
<div class="spot_titles">
<h1>Acne headline</h1>
<p>
Some text related to acne
</p>
</div>