Creating a persistent hover effect

Utilizing primarily CSS, along with background images and adjacent selectors, I am creating a page that displays unique human-readable text information when the user hovers over horizontally stacked images. The textual information is presented in a div on the left side of the page with the class name "default-text", while the images are on the right side of the page, each uniquely classed with sequentially suffixed classnames such as .hover1, .hover2, through .hover7.

The current functionality works when hovering over the images, but I would like to implement a "sticky" hover state where both the image and accompanying text remain in a hover state even after the cursor moves off them. This state should persist until the cursor hovers over another image or until a specified period of time elapses, let's say 10 seconds.

For example; here's two rows of HTML for the images:

<div class="hover1"></div>
    <div class="hover1text hovertext">
        <h3>Best-in-Class BBQ</h3>
        <p>tons of text</p>
        <p>Lots more awesome text</p>
    </div>
<div class="hover2"></div>
     <div class="hover2text hovertext">
         <h3>Penetration and Vulnerability Tenderloin</h3>
          <p>More awesome text</p>
          <p>What you wanted</p>
      </div>
etc for the balance of the 7 items

A portion from my CSS:

.context-services .region-inner .field-name-body .float-right .hover1 {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_off.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_hover.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1 + .hover1text {
    opacity: 0;
    transition: 0s all;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover + .hover1text {
    opacity: 1;
    transition: 0s all;
}

You can view my code on jsfiddle.net here.

I welcome any insights or suggestions. Thank you!

Answer №1

Check out my updated solution, apologies for the lack of transition effects.

(function ($) {

$('.hover1,.hover2,.hover3,.hover4,.hover5,.hover6,.hover7').hover(
function () {
    $('.default-text').hide();
    $(this).addClass('hovered').siblings().removeClass('hovered');
},
function(){
    var self = $(this);
    setTimeout(function(){
        self.removeClass('hovered');
        if (!self.siblings().hasClass('hovered')){
            $('.default-text').show();
        }
    },1000);
});

}(jQuery));

After making this fix, I switched from using CSS hover to adding and removing a 'hovered' class with JavaScript. This allows us to track which elements are hovered over by users.

I replaced the :hover selector with .hovered in the code. When an element is hovered over, we add the 'hovered' class to it and remove that class from its siblings. The mouseout handler waits for 1 second (for testing purposes) before removing the 'hovered' class. If no other tabs are hovered over, the default text is displayed again.

I just noticed a typo - I spelled 'hovered' wrong...please ignore that!

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

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

Using AJAX, SQL and PHP to send data to a separate page for processing

This is the code I use to retrieve questions via ajax from a list of questions stored in a SQL database. <form id="reg-form3"> <ul class="nav nav-list primary push-bottom"> <? $db['db_host']="localhost"; ...

Text remains constant until the mouse hovers over the image

Check out this Example Here is the HTML code: <ul class="img-list"> <li> <img src="http://s11.postimg.org/ynw9rnexf/Cetina_river.jpg" width="360px" height="280px" /> <span class="text-content"><span> Text To Dis ...

"Enhancing user experience: dynamically adding rows using a combo of jquery, ajax, and php

This is the layout of my table. Here is the result I'm getting. Below is the code snippet: <table width="100%" id="controltable" border="1"> <tr> <th> Product Name </th> <th> Product Pri ...

Designing a Custom Wordpress Extension and Integrating External Scripts

As I dive into the world of WordPress plugin development, I'm seeking guidance from the codex to enhance my skills. Currently, I have a basic plugin that loads a javascript file from a CDN and is supposed to display tooltips. However, I'm facing ...

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

Tips for beginning a counter that displays online status from the ground up

I have implemented a script on my website that displays the online player count for the GTA server without needing to refresh the page. You can check out the counter script here. var updateInterval = 700; setInterval(updatePlayerCount, updateInterval); // ...

Fetch the content of a div from one webpage and display it on another page

For the past couple of hours, I've been attempting to load content from one div on a page and display it on another. Here's an example: Let's say there's this Wikipedia page. My goal is to retrieve the content within the div with id="m ...

Interactive form found on a webpage

Hey there! I'm currently working on a task where I want a form to be displayed when the edit button is clicked. Once the save button in the form is pressed, I want to update my database with the new information. It's crucial that this process hap ...

Please consider opening in a new tab rather than a new window

<a href='#' onclick="loadpage();">[RANDOM PAGE]</a> Whenever this code is clicked, the following function gets executed. function loadpage(){ $.ajax ({ type: "POST", url: "fetchpage.php", data: "showpage=1", success: function(msg) { ...

What are some techniques for highlighting the significance of specific items within an unorganized list?

My goal is to utilize semantic markup to highlight the importance or priority of each item. Let me illustrate what I mean with an example. <ul itemscope itemtype="http://schema.org/ItemList"> <h2 itemprop="name">Wish List</h2><br&g ...

Make JQuery send a POST request instead of OPTIONS when making a cross-domain call

Currently, I am facing a challenge where I need to send an ajax POST request (json) to a different domain. However, since I am testing on localhost and do not have access to the server yet, everything is a bit more complicated. Unfortunately, it is not po ...

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

attempting to eliminate on-screen buttons by hovering over the video

Is there a way to make my video play on loop like a GIF without the controls ever showing? I want it to have a seamless playback experience. Any ideas would be appreciated. P.s. Don't worry about any StackOverflow errors when running the snippet. Than ...

The dimensions of the bottom border on left floating divs are inconsistent

One of my designers frequently uses a particular technique in various designs, and I'm struggling to determine the most effective way to style it with CSS so that it fluidly adapts (as it will be incorporated into a CMS). Essentially, when implementi ...

Guide to launching a web browser within a Phonegap app with a button click event

We are developing a PhoneGap application using HTML and JavaScript. Our goal is to integrate PayPal's website so that users can make payments with a simple button click event within the app, and then seamlessly return back to the application afterward ...

The hide and show buttons seem to be missing when utilizing the datatable API

For my current project, I referenced this example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html Despite trying various datatable API examples, I'm still unable to display the expand/collapse buttons. The required CSS a ...

Ways to display a checked or unchecked checkbox in react depending on a boolean value obtained from an API

Is there a way to display a checked or unchecked checkbox in react jsx depending on a boolean value retrieved from an api? ...

Craft a brief description for every individual component discovered

Is there a way to identify and shorten all elements containing a <tspan> tag to just ten characters each? For example: <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> ...

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...