Moving the mouse over a div will alter the heading of another div

Trying to find a solution for a unique problem. I have 5 boxes and need to style one box with a different heading color. As I hover over the other 4 boxes, I want the active box heading to change to a new color. The color should remain even after moving the mouse away.

Additionally, I have set up the functionality where hovering over an image causes the paragraph text to change according to the image. Placeholder text disappears upon hover.

Despite my attempts, I haven't been able to make it work. I'm confident there's a solution out there. Thank you for your help!

Code snippet:

<div class="process">     
            <div class="step box-1">
                <img src="img/seed.jpg" rel="first-step">
                <h3>SEED</h3>
            </div>
            <div class="step box-2">
                <img src="img/seedling.jpg" rel="second-step">
                <h3>CULTIVATE</h3>
            </div>
            <div class="step box-3">
                <img src="img/drop" rel="third-step">
                <h3>DISTILL</h3>
            </div>
<h4 class="steps first-step"> 
            Powerful, effective essential oils come from seeds and plants that are verified for their essential oil potential by Young Living experts, partnering with university experts. 
            </h4>
            <h4 class="steps second-step">
            Young Living farms, located around the globe, are dedicated to perfecting the best growing and harvesting methods. Our experts also travel the world visiting our co-op farms to verify that their growing and cultivating processes match our high standards. These operations provide an ongoing source for essential oils that meet Young Living's demanding quality standards. 
            </h4>
            <h4 class="steps third-step">
            Combining ancient and modern techniques, Young Living is recognized as an innovator in essential oil distillation. We use a gentle, proprietary technique for steam extracting the most effective essential oils, as well as using cold pressing and resin tapping methods for select oils. 
            </h4> 
            <div>

JS:

$(document).ready(function () {
var $placeholder = $('.placeholder');
$('.step> img').hover(function() {
var $rel = $(this).attr('rel');
$placeholder.hide();
});
});

$(document).ready(function () {
var $captions = $('.steps');
$captions.hide();
$('.step> img').hover(function() {
var $rel = $(this).attr('rel');
$captions.hide();
$('.steps.'+ $rel +'').show();
});
});

Answer №1

Give this code a try.

$(document).ready(function () {
    var $placeholder = $('.placeholder');
    var $captions = $('.steps');
    $captions.hide();
    $('.step> img').hover(function() {
        var $rel = $(this).attr('rel');
        $captions.hide();
        $placeholder.hide();
        $('.step h3').css('color', 'black');
        $(this).siblings('h3').css('color', 'red');
        $('.steps.'+ $rel +'').show();
    });
});

Start by changing all .step h3 to the color black. Then highlight the active h3 in red.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to place a different span beneath the current span

Is it possible to add another span below the first span and keep it on the same line as the circle? Check out this link for reference The following is the HTML code snippet: <div class="dialog-box"> <div class="dialog-box-circle"></d ...

Retrieve content from external webpage and direct it to domain.tld/?id=

I am looking to retrieve the body content from an external webpage in plaintext format. After that, I plan to use this value for making an API call. For example: xyz.com/?id=<plaintext from external page> ...

Chrome is having trouble setting the cookie with the Set-Cookie header

I am making an AJAX call to another service's API, expecting to receive a cookie that will be stored in my browser for future API calls. Unfortunately, even though the response headers contain a 'Set-Cookie' header, the cookie is not being s ...

Switching on click using jQuery

I'm having some difficulties with my code and I can't quite figure out how to solve the problem at hand. To be honest, I'm not even sure what the exact question is here. If it seems a bit confusing, I apologize - I'm still new to Jquery ...

What is the proper jQuery traversal method to display a single templated element?

Utilizing handlebars as the view engine for node.js, the subsequent html content is dynamically produced and repeated: http://jsfiddle.net/4Q5PE/ <div class="btnsContainer"> <div class="btn-group" data-toggle="buttons"> <label cla ...

Having trouble retrieving a response from my Symfony2 controller using AJAX, any suggestions on how to solve this issue?

After implementing a signin form that submits values through ajax successfully, I realized that regardless of whether the values match those in the database or not, I always receive a 200 status response from my controller. This makes it difficult to deter ...

Leverage Bootstrap to apply margins to a container

I'm creating a new blog platform and I need some advice on how to properly position the blog post div in relation to the date div so it displays with the appropriate gaps. https://i.stack.imgur.com/oLbCq.jpg https://i.stack.imgur.com/CqV7b.png Here& ...

What method can I use to replace the status bar from the top?

Is there a way to smoothly slide in and out a <View/> on React Native iOS, similar to the animation sequences shown in the images below? ...

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

What is the proper way to invoke a function using a JQuery GET request?

Currently, my task involves authenticating a user using jQuery by calling back to a function on the server-side code. This is what I have accomplished so far: $.get('Authenticate.aspx', function (data){ var auth = data.toString(); } ...

An inexplicable right margin

I am facing an issue with centering a table (a tracklist) under the album cover and title. There seems to be an unexpected margin on the right side that I can't seem to figure out. Any help in identifying the cause of this issue would be greatly appre ...

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked. However, there ar ...

Why is jQuery automatically reloading my page after a basic function?

I have a basic HTML website and added a simple function to move an image to a different div when clicked by the user; function setimage(){ $(".moving_img").click(function(){ $('#target').after( $(this)); }); } However, after moving the ima ...

The request was unsuccessful in being sent

I recently started working with MVC and am currently developing a web app using it. I'm in the process of trying to send a GET request. $(document).ready(function () { var query = $('#productQuery').val(); alert("Getting started."); ...

The footer should always be anchored at the bottom of the webpage, maintaining a consistent position regardless of any changes to the browser's

I've successfully implemented a footer with several buttons that remains positioned at the bottom of the page, 60px above the very bottom, regardless of the content or window size. The CSS I'm using is as follows: #container { min-height: 10 ...

Is it possible to utilize an AJAX GET request to access a separate website?

I have my front end and server both hosted on the same domain, which we'll call X. However, the front end is accessed on port 8080 while the server (nodejs) is set up to listen for activity on port 1337. When I navigate to X:1337 in my browser, the co ...

Scan across a lineup of pictures

I am looking to showcase a series of images in a horizontal alignment, but I want to avoid overloading the screen width. My goal is to allow users to navigate through the images using their mouse - when they move right within the image container, I want t ...

Retrieve all existing Session Variables that start with a specific prefix

Hey everyone, I have set up a series of session variables using an id as part of the name. For example, I have these variables: $_SESSION['test_variable_1']; $_SESSION['test_variable_2']; $_SESSION['test_variable_3']; I&apos ...

Retrieve only the initial tag content using jquery

My goal is to extract the "22" from the following code... <div class="left"> <a class="count-link" href="http://url1.com"> <span>22</span> users </a> <a class="count-link" href="http://url2.com"> <span>10</span ...

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...