I need to update the class name in my image tag
<img src="img/nex2.jpeg" class="name">
When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows:
<img src="img/nex2.jpeg" class="name secondname">
Upon removal of hover, it should revert back to:
<img src="img/nex2.jpeg" class="name">
Here's the solution you've been searching for:
jQuery(function($) {
$('img.name').hover(function() {
$(this).addClass('secondname');
},
function() {
$(this).removeClass('secondname');
});
});
Alternatively, you can utilize CSS for even better results:
img.name:hover {
// Add your custom styles here
}
$("img").hover(
function() {
$( this ).toggleClass('highlight');
}, function() {
$( this ).toggleClass('highlight');
}
);.highlight {
border: 3px solid blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://lorempicsum.com/futurama/200/200/2" class="avatar">Answer:
Here is a JavaScript code snippet that allows you to apply styling dynamically without the need for jQuery:
This approach grants you flexibility in styling elements using JavaScript, and it is also more efficient than using jQuery.
<script type="text/javascript">
function addClass()
{
document.getElementById("apple").className += " secondname";
}
function removeClass()
{
//replaces all classes with initial class
document.getElementById("apple").className = "name";
}
window.onload = function()
{
document.getElementById("apple").addEventListener( 'mouseover' , addClass );
document.getElementById("apple").addEventListener( 'mouseout' , removeClass );
}
</script>
...
<img src="img/nex2.jpeg" id="apple" class="name">
It's important to note that utilizing CSS remains the most efficient method:
img.name:hover
{
//apply all styles from class name secondname
}
By following this technique, you can streamline your styling process by using just one class instead of two.
Feel free to explore different styling options according to your preference.
Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...
I am looking to create a custom table using Angular 2. Here is the desired layout of the table: I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngOnInit() { this.items = [&apos ...
I've recently started working with AngularJS and I encountered an issue while trying to update my MongoDB Database. I'm facing a problem when attempting to update an object within my collection. The code snippet below showcases my approach: //li ...
I have followed all the instructions provided in this documentation, but I keep encountering errors. My testing environment is the "Firefox OS 2.2" simulator. In my manifest file, I have included two permissions as follows: "permissions": { "deskto ...
If the grid in the body contains no data, then I want to display a pop-up message on the menu li element. This pop-up is triggered by adding the class popover-link-a. The current setup looks like this: <li id="tecrube" runat="server" ...
I have established a service to facilitate the sharing of data/state across multiple controllers. One of the controllers updates certain properties within the service using scope data through a save function. The updated data is then accessed by other cont ...
Here is my HTML: <li><a href=""><div class="arrow"></div>List Item</a></li> I'm looking to change the background image of the "arrow" class when hovering over the "List Item" with a mouse. The "arrow" class repres ...
Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...
I have implemented a jQuery UI datetime picker in my project. As JavaScript runs on the client side, it collects date and time information from the user's machine. Below is the code snippet I am currently using: <script> // Function to set ...
Previously, the code functioned correctly but was not properly promisified. const express = require('express'); function runServerAndReturn() { app = express(); console.log('Before starting server'); const server = app.lis ...
Having trouble using $watch with a radio button located inside an AngularJS Modal. The $watch doesn't seem to work when the value changes within the modal. If I move the radio buttons outside the modal, the $watch functions as expected. You can see ...
I am facing an issue with transforming the X position and appending an additional class to create a slide effect in React. It seems to be working differently compared to using vanilla JavaScript. Below is the code snippet: .inputModal { position: absolut ...
I am facing an issue where the pre save hook is not being called before saving the owner in mongoose. Is there a workaround for this problem? const baseOptions = { discriminatorKey: '__type', collection: 'users' } const Base = ...
I need assistance with handling the value from a dropdownlist in my JavaScript function. The function works well if the value is not Null, but I want to replace a Null value with the static value "asc" before passing it to the next function. function g ...
My code contains a nested map function where I try to retrieve values from radio buttons. However, the issue is that it selects all radio buttons in a row instead of just one. Below is the snippet of my code: <TableHead> <TableRow> ...
I'm relatively new to HTML and I'm attempting to create a self-contained HTML page that includes all necessary CSS, data, and JavaScript within the file itself. While I understand that this will result in a rather messy HTML document, it is essen ...
Attempting to convert an array of objects with nested values in child objects like: const objs = [{ "B": { "value": 1, }, "D": { "value": "45" }, "E": { "value": "234" }, ...
I'm trying to create a responsive layout using the Bootstrap "row" and "col" classes, but I'm having trouble figuring out how to structure the content. Here's what I mean: https://i.sstatic.net/WkMmE.png This is my current HTML structure: ...
Currently, I am working on creating a unit test for my writing and JavaScript code. This area is still challenging for me, so I am in the process of learning how to do it correctly. The specific function I am focusing on makes an API call and then assigns ...
I'm attempting to include useNavigate for use as outlined in the top answer here: react button onClick redirect page import { useNavigate } from "react-router-dom"; However, I am encountering this error: export 'useNavigate' (impo ...