Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state.
This is my snippet of HTML code:
<img src="img.jpg"> Name
I want the image to remain hidden initially and only become visible when the mouse is placed over the designated area.
HTML5
#demo{
display:none
}
CSS3
<img id="demo" src="image.jpg"/> <span>Title</span>
JavaScript
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#demo').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#demo').hide();
$(this).css({
"text-decoration": ''
});
});;
});
User Manual
By utilizing the hover event in jQuery, you can achieve the desired effect.
To implement this in your code:
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); // adds underline to text on mouseover
$('#image').show(); // displays image when mouse enters
},function(){
$(this).removeClass('underline'); // removes underline on mouseout
$('#image').hide(); // hides image when mouse leaves
});
});
In the HTML markup:
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
And with the following CSS styles:
.hidden{
display: none;
}
.underline{
text-decoration: underline;
}
You can view a working demonstration of this solution by clicking here.
Based on Anton's response, here's an alternative solution for achieving the same outcome.
$(document).on('mouseover', 'span', function() {
console.log("Mouse over event triggered!");
$('#test').show();
}).on('mouseout', 'span', function() {
console.log("Mouse out event triggered!");
$('#test').hide();
});
Here's an example of how to utilize jQuery, HTML, and CSS:
$(document).ready(function(){
$("#container").on("mouseover", function(){
$("#imageContainer").hide();
});
$("#container").on("mouseout", function(){
$("#imageContainer").show();
});
});
In your HTML, you can use the following structure:
<div id="mainContainer">
<div id="imageContainer" style="display:inline-block;">
<img src="../images/background.png"></img>
</div>
<div id="textContainer" style="display:inline-block;">
<a href="#">Click Me</a>
</div>
</div>
To modify the styling using CSS, you can do the following:
#mainContainer a {
text-decoration:none;
}
#mainContainer a:hover {
text-decoration:underline;
}
CSS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Unique Rewrite Test</title>
<script type='text/javascript' src='http://example.com/jquery.min.js'></script>
<style type='text/css'>
#unique-test{
display:none
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#unique-test').show();
$(this).css({
"font-weight": "bold"
});
}).on('mouseleave', function () {
$('#unique-test').hide();
$(this).css({
"font-weight": ''
});
});;
});
});
</script>
</head>
<body>
<img id="unique-test" src="http://www.example.com/image.jpg"/> <span>Unique Name</span>
</body>
</html>
Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...
When I relocate certain DOM nodes from one context to another, some of the child nodes end up losing their event listeners. HTML <div><lots of nested nodes .../><div> <div> <div> <div#newNode></div> < ...
Currently delving into the world of d3.js for the first time. In our project, we needed to adjust the width of each bar from .attr('width', xScale.rangeBand()) line 46 to .attr('width', '10') line 50 After making this cha ...
Currently, I am developing a recipeBox application using React JS. Within this application, there is a state defined as: this.state = { recipeArray: [] ...} Users have the ability to add recipes by pushing objects {recipe_Name : Ingredients} into tha ...
I am attempting to extract information from a file on the following website. Specifically, I am trying to download an Excel sheet containing a complete directory of towns in TRIPURA, listed as the first item in grid format. Here is the code snippet I am ...
I'm experiencing an issue with the datetimepicker where it doesn't display a calendar when I click the icon. Interestingly, the Chrome browser isn't showing any errors in the development console. <script src="Scripts/jquery-2.1.1.min.js ...
Take a look at this example: http://jsfiddle.net/SsPqS/ In my HTML, there's a div with the class "record" to which I've added a click function. Within the click function, I have the following code snippet (simplified): $(".record").click(funct ...
In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...
Is there a way to determine if an ajax function is occupied by a prior call? What measures can be taken to avoid invoking an ajax function while it is still processing a previous request with a readyState != 4 status? ...
Can you guide me on implementing this session: (UserID is part of the login table) Session["UserID"]="usrName"; How can I incorporate the above code into the following script? using System; using System.Data; using System.Collections.Generic; using Sys ...
Currently, I am working on automating a web service using Selenium and Python. My ultimate goal is to extract the text "test" located below. However, I am facing some challenges in figuring out if this is feasible through Selenium or any Python library. & ...
Embarking on my journey as a Vue JS learner, I took the plunge to install Vue and delve into creating web applications using it. So, I globally added npm Vue. npm install --global vue-cli This action resulted in: npm WARN deprecated [email protected]: T ...
I encountered the error Uncaught TypeError: Buffer2 is undefined when trying to import jsonwebtoken into my React project. The errors occur with both import jwt from jsonwebtoken and import {decode} from 'jsonwebtoken'. My versions are jsonwebt ...
I have integrated Nvd3 into my Angular project to create various types of charts. Utilizing the angular directive from Krispo's website, I am currently working on a pie chart that displays values in percentages. However, the displayed values are round ...
Seeking a way to show a spinner while making a synchronous Ajax request to fetch data from the server. Acknowledging that asynchronous mode is preferred, but not permitted in this case. Aware that a sync ajax request can cause browser blocking. An attemp ...
I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...
My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...
Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...
I have a question that may seem simple, but I'm unsure how to convert the time difference between two dates into a percentage. Currently, I am utilizing a JQuery plugin available at: The specific script on the page responsible for calculating the pe ...
Below is the code snippet in question: type FormValues = { files: File[]; notify: string[]; }; const validationSchema = yup.object({ files: yup .array<File[]>() .of( yup .mixed<File>() .required() .t ...