Tips on changing the background image when hovering over a list item and a link with CSS

I have been attempting to adjust an image that is nested within a link which is nested inside a list.

My initial idea was to use the image as a background picture. The issue arises when I try to position the background picture correctly with respect to the link and the list itself, especially considering that there is additional text written inside the <li>.

.solution-pic {
     margin-bottom: 10px;
     width: 151px;
     height: 63px;    
     display:block;
     background: transparent url('http://s1.postimg.org/ysb0w71ej/solution_icon_personal_hover.png') center top no-repeat;
 }

You can view my fiddle example here

htmlcss

Answer №1

Implement the hover property to modify the image

   a:hover.solution-pic{
             margin-bottom: 10px;
             width: 151px;
             height: 63px;    
             display:block;
             background: transparent url('new img url') center top no-repeat;
         }

Answer №2

Simply changing something on hover can be achieved by using the :hover selector in your CSS.

//CHANGE BACKGROUND TO WHITE -Exclude the image
.solution-pic:hover {
      margin-bottom: 10px;
      width: 151px;
      height: 63px;    
      display:block;
      background:white;
}

For proper alignment, consider looking into bootstrap CSS for guidance. Here is a helpful link:

http://getbootstrap.com/components/#glyphicons-examples

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

Setting up an i18n project in AngularJS

I just embarked on my angularjs journey yesterday with little to no prior knowledge about it. My initial goal is to centralize all the labels for my UI in a file (to facilitate swapping them out for i18n). As far as I know, this can be achieved by importi ...

javascripthtmlangularjs

Learn how to incorporate a newly created page URL into a customized version of django-oscar

Just starting out with django-oscar and trying to set up a new view on the page. I've successfully created two pages using django-oscar dashboard, https://ibb.co/cM9r0v and added new buttons in the templates: Lib/site-packages/oscar/templates/osca ...

pythonhtmldjangopython-3.xdjango-oscar

What is the best way to apply a Javascript function to multiple tags that share a common id?

I am experimenting with javascript to create a mouseover effect that changes the text color of specific tags in an HTML document. Here is an example: function adjustColor() { var anchorTags = document.querySelectorAll("#a1"); anchorTags.forEach(func ...

javascripthtmlcss

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

variableslessmixinscssshorthand

Responsive background styling with CSS

I'm currently learning how to create responsive websites, and I've encountered an issue. When I resize the website horizontally to a point just before the edge of the screen touches one of the elements, the background also shrinks, leaving white ...

htmlcssreactjs

Python selenium issue: Element not found in the document using locator (//input[@type='file']')

I'm attempting to automate the process of uploading a file using python. However, when I run the code below with python selenium, an error is thrown. I even added a 10-second wait to prevent synchronization issues. driver.execute_script('window ...

pythonhtmlseleniumautomation

Using CSS3 to Enhance the Look of Multiple Background Images

While I've come across similar inquiries, I haven't found a satisfactory explanation yet. My aim is to grasp the best CSS practices for implementing multiple repeating backgrounds. Essentially, I want a background image to repeat across the entir ...

htmlcss

incorporate partial html into nodeJS & Jade using AJAX requests

Is there a smart method to load just a segment of a page using Node.js and Jade?: I'm in the process of creating a music blog and I want to incorporate a seamless player at the top of each page. The goal is for the player to keep playing without inte ...

htmlnode.jspug

Having trouble achieving the desired effect with inline block

I'm having some trouble creating a simple store page. One of the products is supposed to look like this: https://i.sstatic.net/JLlua.png However, it's currently showing up like this: https://i.sstatic.net/hHYUm.png I've been attempting t ...

angularhtmltwitter-bootstrapcss

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an <h2 class="landing-panel-title> containing a <span class="landing-panel-icon-right ion-ios-search-strong>. The second class on the span is from an icon font called ionicons. Despite this, it may not ...

htmlcss

Is the "add" feature malfunctioning?

My code is experiencing an issue where the URL and ID are not being passed correctly from one function to another. When I click on a link that contains the add() function, it fails to capture the URL and ID. <a href="#" style="color:#FFF;" onclick="add ...

javascripthtml

The div-tag is not displaying the background image as expected

I'm completely stumped. My goal was to create my own gallery, but right from the start, I hit a roadblock: Trying to display an image as a background in a <div>. I've tried everything, searched high and low on the internet, combed through s ...

phpcsshtmlbackground-image

Menu Overlay (jQuery/CSS)

I am in the process of developing a website that is optimized for both mobile and desktop devices. I am currently brainstorming ideas for the main navigation, which I envision as an overlay that slides down similar to . However, I am struggling to create ...

jqueryhtmlcss

Can a container be sized based only on the width of one of its children?

Take a look at this snippet of html: <div class="container> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </div> I am aiming for the containe ...

htmlcss

"Incorporating a hyperlink into a newly added table row with the help

When utilizing jQuery, I am able to dynamically add rows to a table with each row containing an anchor tag. However, when attempting to populate the anchor tags with links using jQuery, the links do not appear as expected. Strangely enough, the other data ...

javascriptjqueryhtml

Selection pseudo selectors for tooltips are a great way to provide additional

Can someone explain how tooltips change on Medium.com when you double click a word or sentence to reveal options like share and edit? https://i.stack.imgur.com/0EVmH.png ...

javascripthtmlcss

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

css

When implementing dynatable with Meteor, the outcomes may vary between the demonstration in a fiddle and the actual application

Here is the fiddle I created for this question: https://jsfiddle.net/ereday/82wzwem8/2/ In the fiddle, you'll notice that the table header has a green background. Now, let me share the code snippet from my meteor project: simple-todos.html <head ...

javascriptjqueryhtmlmeteor

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling wit ...

javascriptjqueryhtmlcss