I recently came across an intriguing issue with changing the img src on a:hover.
Check out this SCREENSHOT
When hovering over the <a> sector, it's not showing the white image as expected. I have black and white icons, and I want the img src to change to the black icons when hovering over the #menu sectors, instead of the white ones for non-hovered sectors.
For the CSS and HTML code, please visit:
ul li a{
background:#000000 url(/path/to/white/icon) left no-repeat;
background-color:black;
}
ul li a:hover{
background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}
give this a shot
Check out this example below demonstrating how to dynamically change the background image of an li element on a mouseover event.
Change Background Image on Mouseover
I hope you find this helpful!
One way to optimize loading images on your website is by using background image sprites. An informative article on this topic can be found here: http://css-tricks.com/css-sprites/. By utilizing sprites, you can significantly reduce the number of server requests needed to fetch individual images since all images are consolidated into a single file.
Here's an example of how you can implement CSS for background image sprites:
ul li a{
background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
background-color: #FFFFFF;
}
// Define different classes for each link
ul li a.home {
// Specify position for white icon
background-position: 0 0;
}
ul li a.home:hover {
// Change position for black icon when hovered
background-position: 0 -20px;
}
I'm struggling to align the image flush with the right border of the div without any margin or padding. I've tried various methods but none seem to work. Hoping someone can provide a solution for me. Thank you. Below is the code snippet: HTML ...
I have a button with the ID #first that, when clicked, is replaced by another button with the ID #second. However, if I refresh the page after clicking on the second button, it goes back to displaying the first button. Is there a way to make sure that th ...
I'm working with the following code: ... <div class="container"> <div class="fancy"> <fancybutton></fancybutton> </div> <button (click)="addAttribute()">Remove</button> <button (click)="remAttr ...
As I work with the React Material-UI framework, I am using this table example as a guide. However, I am facing an issue where my table becomes overcrowded when I have numerous columns, causing the content to be cut off. I recently came across the material ...
I am facing an issue with 2 nested divs in my HTML code. The design requires the inner div to appear "on top of" the outer div, like this: (source: examplewebsite.com) Although I have applied CSS to both elements, including a negative top margin on t ...
One issue I'm encountering with my website involves the border at the bottom of my navigation bar. Despite trying to adjust the box-sizing property to border-box, I still can't get it to display correctly. My goal is to have the border span 100% ...
I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and w ...
Consider the following code snippet for a page named MyWebsite.com/page.php <?php $username = "SuperUsername"; $password = "SuperPassword"; if (isset($_GET['p']) && $_GET['p'] == "login") { if ($_POST['user&ap ...
My website is powered by ASP.NET MVC and it showcases records in a Bootstrap 3 table. When there are no records, a div is displayed. Following the advice of another user, I adjusted the view to render the table along with the "no records" div simultaneousl ...
window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...
I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...
When making an Ajax call to retrieve XML data from a different domain using a PHP proxy to bypass cross-origin restrictions, I am unable to extract the values from the XML nodes and display them in my HTML tags. Despite no errors showing up in the browser ...
I am attempting to select/enter a value into a dropdown menu using Python Requests, but for some reason it is not working. Here is the HTML code: <select name="hourly_rate" class="default-input" id="hourly_rate"> <o ...
Looking to create a layout with two columns, featuring a fixed sidebar on the left and centering the main content area. The goal is for the centered content to remain in place when resized and not move further left than where it touches the nav bar (left: ...
Why can't I see the top and bottom margins in Safari, Chrome, or Firefox when I've set the margin to 50px? HTML: <div style="width:400px;background-color:#ffffaa"> <p style="background-color:#aaffff; padding:20px; ...
I'm trying to insert a font icon inside an input field using the following method: <input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict"> Currently, the font icon  is ...
I am striving to extract the code of a table from another website using selenium, save it in the context dictionary, and then embed it into one of the templates so that it seamlessly becomes part of the page's HTML structure without displaying the cod ...
https://i.sstatic.net/GfKem.png I have a dilemma with my HTML code. I am trying to figure out how to collapse the menu when clicking on a menu item using JavaScript. I have been stuck on this for two days now. Can anyone provide a solution with an explanat ...
Photo Gallery Title Issue I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this sc ...
Below is the code snippet for the model that retrieves names and ids... public class AccountType { public int Id { get; set; } public string Name { get; set; } public static AccountType[] AvailableAccountTypes { get { ...