What is the best way to ensure that the toggled title remains visible even after the mouse out function has

Here is a fiddle for reference: http://jsfiddle.net/rabelais/Fzs7u/

I am working on a feature where thumbnails and titles toggle when hovering over them with the mouse. However, I am facing an issue where the title does not remain visible after moving to a different thumbnail. Should I consider using something other than the toggle function, such as targeting the css display rule?

$(".thumbnail-wrapper").on("mouseover mouseout", "img", function () {
  $("#" + $(this).data("title")).toggle();
});
javascriptjqueryhtmlcss

Answer №1

To keep the caption visible, I would suggest a different approach:

http://example.com/abc123/

<div class="caption-container" id="caption">
</div>

<div class="image-block repeatable">
    <img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img012_2.jpg" alt="1" data-description="Vivienne Westwood"/>
</div>
<div class="image-block repeatable">
    <img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img013_3.jpg" alt="2" data-description="Paul Smith"/>
</div>

$(".image-block").on("mouseover", "img", function () {
    $("#caption").text($(this).data('description'));
});

Answer №2

http://jsfiddle.net/Fzs7u/3/

$(".thumbnail-wrapper").on("mouseover", "img", function () {
  $('.title:visible').hide();
  $("#" + $(this).data("title")).show();
});

To enhance the functionality, I replaced .toggle() with .show() and implemented hiding of .title on mouseover to ensure only one title is visible at a time. Additionally, I eliminated the mouseout handler for simplicity.

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

What could be causing my button to pass the event to its parent element?

I've implemented a clever trick within a div, where I have included my own custom "data" indicating what action to take when the user clicks on it. My JavaScript code snippet is as follows (with some code omitted for clarity): $('[data-hqf-swit ...

javascriptjqueryhtmlcss

React Highchart issue: The synchronized chart and tooltip are failing to highlight the data points

I am currently utilizing the highchart-react-official library to create two types of charts: 1) Line chart with multiple series 2) Column Chart. My objective is to implement a synchronized behavior where hovering over a point in the first line chart hig ...

javascriptreactjschartshighcharts

What could be causing the TypeError I encounter when trying to import @wordpress/element?

Encountering a similar issue as discussed in this related question. This time, I've switched to using '@wordpress/element' instead of 'react-dom/client' based on the recommendation that it also leverages React functionalities. Ho ...

javascriptphpreactjswordpressreact-dom

Ways to populate the second nested array with new values without overwriting existing ones

I am encountering the following issue: this.logs = {}; this.logs[1] = resp; In my initial array, I have the result shown in the image below: https://i.sstatic.net/RScSm.png However, when I try to add a second level array with another array like this: th ...

javascriptarraysangulartypescriptarraylist

Steps for making a website with password protection

I'm currently working on building my website and I want to implement password protected JavaScript code for access. Will I also need to update my CSS, or is it just a matter of adjusting my HTML code? ...

javascripthtmlcss

Restrict access to table records by specifying an array of row identifiers

Hi everyone, I've encountered a small issue. Just to provide some background, I have a table with checkboxes. Each row in the table has an associated ID, and when selected, I receive an array like this: const mySelectedRoles = [1997, 1998, 1999] Once ...

javascriptarraysreactjs

How can I ensure that my columnar div box is responsive on smaller devices with CSS or should I consider using Bootstrap?

I have a container with a row that contains multiple div boxes. Currently, I am using CSS to spread these div boxes into 3 columns using the column-count property. I have a few questions: 1) How can I make this responsive for smaller devices? 2) Can I ...

htmlcssgridviewbootstrap-4

Creating a simulated RESTful backend using Sinon.js for an Angular.js project

In the process of developing my Angular.js application, I am incorporating RESTful services that utilize the $resource service. While this app will eventually connect to a Java Spring application, I am currently focusing on creating an isolated mock server ...

javascriptjsonangularjsxmlhttprequestsinon

Turn a one-dimensional array of arrays into a structure of nested objects

As a novice, I am trying to figure out how to convert an array of values into nested objects based on categories. If the category (i.e., 1st element) exists, then the subsequent subcategories should be nested within it. Can someone please assist me with ac ...

javascriptarraysnested-object

What exactly is the concept of lazily installing a dependency?

The website here contains information about the changes in Ember 2.11. Ember 2.11 now utilizes the ember-source module instead of the ember Bower package. In the upcoming Ember CLI 2.12 release, Bower will no longer be installed by default but will only ...

javascriptember.jsnpmbower

Using VueJS to dynamically filter table data based on the URL ID

I am looking to retrieve data from a JSON API based on the id in the URL of the page. First, I have the code for my table which contains links based on a URL id that leads to the template of the second table: <table class="table table-condensed"> ...

javascriptjsonfilterhtml-tablevue.js

Changing positions of nodes and links in D3 v4 force layout during transition

Utilizing D3 v4 to create a dynamic social network visualization, I have included an example at the following link: https://jsfiddle.net/wand5r6L/1/. In this particular example, there are two years worth of data being displayed. My goal is to update the n ...

javascriptd3.jsforce-layout

What is the reason behind Collection.bulkwrite() only writing a single document to the MongoDB database?

I have utilized ag-grid to create this grid, and my objective is to bulkwrite its data into my MongoDB database by clicking on the saveInformation button. https://i.sstatic.net/bbMN4.png app.component.ts saveInformation() { console.log('actio ...

javascriptangularmongodbexpressmongoose

Cracked Code at Position 880 (LeetCode)

Given an encoded string S, the decoded string is determined by reading each character and following the steps below: If the character is a letter, it is written directly onto the tape. If the character is a digit (denoted as d), the current tape i ...

javascripttypescriptalgorithmdata-structuresdecoding

Effortless floating made possible by the magic of Twitter Bootstrap

I am currently working with a group of elements that are designated as row-fluid and span12, each containing span4 elements. My goal is to have these elements automatically align in columns of 3, regardless of how many are present. However, I am facing an ...

csstwitter-bootstrap

Guide on choosing the close icon in lightgallery using jQuery

Despite numerous attempts, I have been unable to find a solution to my query. Therefore, I am seeking guidance on how to target the close icon in lightgallery using jQuery, such as $(""). (for illustration purposes) The close icon is represented by a sp ...

jqueryhtml

Updating Variables Using State in React Native

Recently delving into the world of React, I've been experimenting with state and props. My current goal is to fetch data and use it to populate card views in my application. Here's a glimpse of what my code looks like at the moment: class Two ...

javascriptreact-native

Differences between an AngularJS function() and a factory function() when used in a

When it comes to Angular, I've come across directives being written in two different ways: .directive('example', function () { // Implementation }); .directive('example', function factory() { // Implementation }) Can you ...

javascriptangularjsangularjs-directive

How can I position a button below the text area but outside of its boundaries?

Greetings! Here's an image of the current state I am in: https://i.sstatic.net/Ceemp.jpg However, my desired outcome should look like this: https://i.sstatic.net/0IN5w.jpg In my text area, consisting of 5 rows, I would like the button to be position ...

cssbuttontextareabootstrap-4

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

javascripthtmlcssreactjsstyled-components