Replace the designated text by choosing an image based on the identified Id

I am working on a query that updates the text of a list item when hovering over an image. I have included an event target in the query:

    $('img').on('mouseover', function(){
     // I want to use an Id for the text instead of 'li'
      $('li').css('text-decoration', 'underline');
    });

    $('img').on('mouseout', function(){
      $('li').css('text-decoration', 'none');
    });

Now, I would like this change to only affect items with the same Id as the image:

s[i++] = '<li id=\"'+  vizList[j].name +'\">';
s[i++] =  '<a>'+ vizList[j].name + '</a>';
s[i++] =  '<img id=\"'+  vizList[j].name +'\" src="../renderer/bundles/' + vizList[j].icon + '" width="268" height="120" style="display:block"/>';
s[i++] = '</li>';

Answer №1

Does the following code meet your expectations?

$('img').on('mouseover', function(event){
  $(event.target).closest('li').css('text-decoration', 'underline');
});

$('img').on('mouseout', function(event){
  $(event.target).closest('li').css('text-decoration', 'none');
});

Answer №2

Initially, the ID should be unique, so consider making them slightly different or utilize classes instead.

Revise your $('li') selector to $(this).find('li'). This adjustment will help locate the image within the hovered li.

You could also streamline this by using the .hover function to condense it into a single call:

https://jsfiddle.net/juk41yLs/1/

$('img').hover(
  function() {
    $(this).parent('li').css('text-decoration', 'underline');
  },
  function() {
    $(this).parent('li').css('text-decoration', 'none');
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    Hover over this > 
    <img src="http://placehold.it/350x150">
  </li>
</ul>

Answer №3

section, it appears that you are looking to alter the li content and its associated img when the mouse hovers over the img. To achieve this effect, implement the following code:
$('img').on('mouseover', function(event){

    $(this).parent().css('text-decoration', 'underline');
});

Answer №4

   $('img').on('mouseover', function(event){
     // Instead of using 'li' as the ID, I want to use a text ID
      var imgId = event.target.id;
      
      $('#' + imgId).css('text-decoration', 'underline');
    });

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

Incorporating blur.js into an AngularJS project

Attempting to create a blurred background effect with Angular on a div, similar to the image above. I am using blur.js and it works well with jQuery. My main question is, can this be achieved with AngularJS and what is the best approach? I am new to Angul ...

What are some practical ways to incorporate JQuery into a ReactJS project?

Exploring the world of ReactJS for beginners, I am faced with a challenge. I have created a navigation bar that should stick to the top of the page when scrolled past 100px. Here is the code for my navigation bar: Navigation Bar Component Code: export de ...

Increase the loading speed of the tooltip when hovering over the Legend of the Doughnut chart

I have a similar implementation to the answer provided in this response, which I will share here for better understanding. When you hover between items in the legend and do so quickly, you may notice that the tooltip on the chart does not always display. ...

The task "grunt-karma.js" is currently being loaded, but unfortunately an error has occurred: SyntaxError - An unexpected identifier was found

Encountering an issue when loading "grunt-karma.js" tasks while all other tasks are loading correctly. This problem started to occur after updating several dependencies, including grunt-karma and karma. Here is the section from my package.json: "grunt-ka ...

Creating Stylish Buttons with Icons in Rails 3.1 Using CSS

Is there a way to incorporate an icon into a Rails button using CSS? I am looking for assistance with both <% button_to %> and <% f.submit %> Thank you for your help Hello @jdc, I have figured out a solution on my own. While I didn't us ...

Currently, I am utilizing Angular 2 to extract the name of a restaurant from a drop-down menu as soon as I input at least two characters

I am currently utilizing Angular 2 and I am trying to retrieve the names of all restaurants from a dropdown menu. Currently, when I click on the text field, it displays all the results, but I would like it to only show results after I have entered at least ...

Obtaining a variable from within two nested functions

I'm looking for a solution where I can retrieve a variable from inside a function using an ajax call. For example: function returnStuff(){ $.ajax({ //do something }).done(function(response){ return response; }) return response; } The ...

Updating the urlTemplate property of a MapView.UrlTile component in real-time

As a newcomer to React and React Native, I am currently exploring the usage of React Native Maps. My goal is to dynamically update the urlTemplate property of a MapView.UrlTile component every second for a certain number of times. My approach involves usi ...

Unable to access the camera page following the installation of the camera plugin

The issue I'm encountering involves using the native camera with the capacitor camera plugin. After implementation, I am unable to open the page anymore - clicking the button that should route me to that page does nothing. I suspect the error lies wit ...

Issue with VideoJS: MP4 file does not play after dynamically updating video URL

I have been using videoJs to display videos on my website. Below is the HTML code: <video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4"> <p class="vjs-no-vjs">Your bro ...

Having trouble with incorporating multiple sliders on your website using W3.CSS?

I'm in the process of designing a portfolio website and have decided to incorporate modals to showcase my projects. I've opted to use the W3.CSS framework for this purpose. The issue I'm currently facing is that only the first slideshow see ...

Difficulties in Adjusting the Size of Three Image Columns within a Website's Body

While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the web ...

Jquery Mobile listview not functioning properly with voiceover assistive technology

When building a website with the main navigation using jQuery Mobile listview, everything works smoothly on browsers like mobile safari. However, issues arise when voiceover or similar features are enabled, as the navigation is disabled due to jQuery mobil ...

The program detected an unfamiliar command named 'node_modules', which is not recognized as an internal or external command, operable program, or batch file

I have integrated gulp into my project. Successfully installed gulp Added the npm script Executed the script using "npm start" Encountered the following error:- **> start node_modules/.bin/gulp watch 'node_modules' is not recognized as an ...

What is the best way to implement multiple conditions in v-if within VueJS?

Below is the code snippet I am working with: JavaScript let Names = [ { Name: "Josh" FullName: "" }, { Name: "Jonathan" FullName: null }, { Name: "James" ...

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

What is the process for accessing a table in indexedDB using Dexie.js immediately after it has been opened?

I am faced with the challenge of needing to verify if a specific table already exists in IndexedDB right after it has been opened. However, I am unsure how to access the DexieDB object inside the 'then' statement. this.db = new Dexie("DBNAME"); ...

Issues with endpoints not functioning after importing a NESTJS module

Could someone please explain why the appController is functioning correctly while the itemsController, imported from a module, is not? I have been learning NestJS and followed the documentation as instructed. The appController is working fine with its unc ...

Quicker loading times for background images when creating PDFs using wkhtmltopdf

As I work on generating a 5-page PDF from my HTML file using wkhtmltopdf, everything seems to be running smoothly. However, I've encountered an issue when it comes to the time it takes to complete this task, especially when a background image is inclu ...

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...