Hover over the text only, not the entire row

Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created:

<ul id='ulid'>
<li>Task1</li>
<li>Task2</li>
<li>Task3</li>
<li>Task4</li>
<li>Task5</li>
<li>Task6</li>
<li>Task7</li>
</ul>

<br /><br />


<br /><br />

<div id="show_details"></div>

jQuery(document).ready(function() {


$('ul#ulid li').hover(function() {
    $('#show_details').html($(this).text());
}, function() {
    $('#show_details').html('');
});
});

I would greatly appreciate any assistance.

Answer №2

To potentially resolve this issue, try setting the margins and padding of the li elements to 0. The problem may be occurring because li elements have default margins and padding.

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

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

An error has occurred with bootstrap.js due to an issue

I encountered an issue on my website. The error message reads: Timestamp: 10/17/2012 8:27:23 PM Error: TypeError: $ is not a function Source File: path to my site/js/bootstrap.js Line: 23 If this error is caused by a conflict with another j ...

Problem with spacing in Bootstrap horizontal layouts

My project is currently empty except for a code snippet I copied from Bootstrap's horizontal gutters page. Unfortunately, I am not seeing any horizontal gaps as expected. Why could this be? It seems that only vertical gutters are working... Click her ...

Scrolling through menus horizontally

I am faced with a challenge where I have Menu items from Menu1 to Menu10, but the limited space on the web page prevents me from displaying all the menu items at once. Currently, I can only show 4 menu items - Menu4 to Menu7. To access the remaining menu i ...

Guide on utilizing popup box input to amend CSS (background color)

I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...

The Bootstrap modal causes the scrollbar to vanish upon closure

Despite trying numerous solutions and hacks on this issue from StackOverflow, none of them seem to work for me. Currently, I am utilizing a modal for the login process in Meteor (e.g. using Facebook login service) which triggers a callback upon successful ...

Ways to retrieve the output from an AJAX call

Today I'm developing a JavaScript function named "sendData". This function simplifies the process by eliminating the need to manually code an entire ajax statement. However, considering that it operates asynchronously, I found myself wondering how to ...

A guide on extracting the text content from an anchor tag by using xPath() with a combination of selenium and Mocha

I have successfully chosen an <a> tag. My goal is to display the text of the anchor tag, but I am facing difficulties. The technologies being used are selenium, mocha, javascript, and phantomJS This is the detailed script: var assert = require(&ap ...

Incorporate Select2 functionality within the Angular2 application

I'm currently working on incorporating the Select2 plugin into my Angular2 application. Successfully, I have managed to set up select2 and transform my multiple select fields as expected. However, I am now facing a challenge in retrieving the selected ...

Include a new variable in a JavaScript email template

Is there a way to include the variable bob in the body of an email? var bob; function sendMail() { var link = "mailto:YourEmailHere" + "?cc=" + "&subject=App Build Link Buit With MWFPRO's App Build Tool" + "&body=Hi ...

How can I extract the value of the first element in a dropdown using Javascript?

Imagine there is a dropdown menu with an unspecified number of options: <select id="ddlDropDown"> <option value="text1">Some text</option> <option value="text2">Some text</option> <option value="text3">Some ...

Is there a way to modify the font color in Chrome when the input autofill feature is active?

I tried adding the css code below: input:-webkit-autofill{ color:white; } Unfortunately, it didn't have any effect. If anyone can assist me with this issue, I would greatly appreciate it. Thank you. ...

Experiencing code coverage challenges in Angular 8 relating to function properties

https://i.sstatic.net/WQpVB.png Looking for suggestions on how to create a unit test case in Jasmine to address the code coverage problem. Any ideas? ...

What is the best way to use selenium to extract all p-tags and their corresponding h2-tags?

I am looking to retrieve the title and content from an article: <h2><span>Title1</span></h2> <p>text I want</p> <p>text I want</p> <h2><span>Title2</span></h2> <p>text I want< ...

Adding a proptype for a setState method in React components

I am currently developing a reusable component for a project. This particular component includes user and setUser as props, much like the example provided below. const UserComponent = ({ user, setUser }) => { const calcHandler = useCallback(() =& ...

Using JavaScript to create customized checkboxes is a useful way to

I am looking to develop a JavaScript code that saves all the checkboxes selected by a user. When the user clicks on the finish button, the code should display what they have chosen (text within the label). Admittedly, I am unsure of how to proceed and wou ...

The addition of one hour to the date time format increases the total time

Currently, I am retrieving a datetime column value from a database table as 2015-03-04 21:00:00 UTC. When attempting to convert this format into a datetime picker, the following code is used: date = moment($("#event_start").val()); // date time value fro ...

How do I make an element stay in place between two other elements?

Trying to make an element "float" between two other elements using the `position : sticky` attribute. Not achieving the desired effect and unable to determine why. The goal is for the `copy` to float between the bottom of `upper` and the top of `lower`. ...

Decipher the JSON data for a Facebook cover photo

I am utilizing the Facebook Graph API to retrieve the user's cover picture. By accessing the link provided at , a JSON object containing the picture link is returned. How can I fetch this link using JQuery or JavaScript? Here is my attempt: HTML: & ...

What is preventing me from successfully retrieving data at times when using curl_setopt and jQuery Ajax?

In my quest to fetch data from another server, I am using the curl_setopt PHP function along with Ajax. The function I have created seems to be working fine, but sometimes when I refresh the page and the internet connection is slow, I don't receive an ...