Change Background Image of Li on an A:Hover

change background image of li on an a:hover

From what I gather you cannot do what you are after in the way you have described it.

However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing

li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"

li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability

How to change ul background image while hover on a specific li?

You can not alter the parent with CSS at this current time. You can alter a sibling.

#container {
  width: 500px;
  position: relative;
  min-height: 300px;
}

ul {
  list-style: none
}

a {
  text-decoration: none;
  color: white;
  font-size: 32px;
}

a:hover {
  text-decoration: none;
  color: Chartreuse;
  font-size: 32px;
}

li {
  padding-top: 1em;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("https://cdn.pixabay.com/photo/2016/03/09/11/44/network-1246209_960_720.jpg");
  transition: background-image 0.3s ease-in-out;
}

#option1:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2016/08/12/14/25/abstract-1588720_1280.jpg");
}

#option2:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2015/01/12/17/40/padlock-597495_960_720.jpg");
}

#option3:hover~.bg {
  background: url("https://cdn.pixabay.com/photo/2016/01/14/05/51/rj45-1139366_960_720.jpg");
}

<ul id="container">
  <li id="option1">
    <a href="#">Number 1</a>
  </li>
  <li id="option2">
    <a href="#">Number 2</a>
  </li>
  <li id="option3">
    <a href="#">Number 3</a>
  </li>
  <li class="bg"></li>
</ul>

Changing background image when hovering on a list item

You can do this by CSS only. It's a trick and in the most of the cases you will need to use JS, but its working and working good! (See it in Full Page)

.wrapper {  width:900px;  height:600px;  position:relative;}
.item {  position:relative;  z-index:1;}
.bg {  position:absolute;  top:0;  left:0;      width: 100%;    height: 100%;}
.bg img {  position:absolute;  top:0;  left:0;  width:100%;  height:100%;  opacity:0;  transition:all .3s ease;}
.bg img:nth-child(1),.item:nth-child(1):hover ~ .bg img:nth-child(1),.item:nth-child(2):hover ~ .bg img:nth-child(2),.item:nth-child(3):hover ~ .bg img:nth-child(3) {  opacity:1;}

<div class="wrapper">    <div class="item">Item 1</div>    <div class="item">Item 2</div>    <div class="item">Item 3</div>    <div class="bg">      <img src="http://i.stack.imgur.com/tq1uR.jpg" />      <img src="http://i.stack.imgur.com/ZAy9V.jpg" />      <img src="http://i.stack.imgur.com/xfvXS.jpg" />    </div>  </div>

change li background when hover a

Here is a quick example using pseudo-elements: http://codepen.io/anon/pen/iwerJ

Using the exact HTML you originally posted, with CSS like this:

.nav { 
  background: #CCC; 
  font-family: Helvetica, Arial, sans-serif;
  line-height: 48px; 
  margin: 50px auto 0;
  width: 90%;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block; 
}

.nav ul li {
  float: left;
  font-size: 14px;
  list-style: none;
  padding: 0 10px;
  position: relative;
}
.nav ul li:hover:after {
    /* Replace background with image */
    background: #abc123;
    /* Optionally remove radius */
    border-radius: 30px;

    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -30px; 
    margin-left: -30px;
    height: 60px; width: 60px;
}

.nav a {
  color: #333;
  display: inline-block;
  line-height: 180%;
  padding: 0 4px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
    .nav li:hover a { background: #FFF; }

Change background-image on li hover; how to change back when I get of the li?

You can add this mouseout function to the JS, using the URL of the background-image in your original CSS rule:

links.on("mouseout",function(){
    var url = $(this).attr("data-background");
    $("#background").css("backgroundImage","url('https://www.aviary.com/img/photo-landscape.jpg')");
});

https://jsfiddle.net/t0n0u5yv/

Change background image on hover

You should set the text parameters like this:

LIVE DEMO OF YOUR WEBSITE

#menu ul li a:hover
{
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Change image background color on hover

Use the alpha channel and a negative z-index

• First, you need to select the right element: li:hover .image.

• Secondly, you need to use rgba colors to achieve transparency.

  li:hover .image{    
      background: rgba(0, 255, 255, 0.5);
  }
  

• Thirdly, push the actual images to the back:

  img {
      position: relative;
      z-index: -1;
  }
  

Working example:

ul {  list-style: none;}
li {  display: inline-block;}
img {  filter: brightness(50%);  -webkit-filter: brightness(50%);  -moz-filter: brightness(50%);  -o-filter: brightness(50%);  -ms-filter: brightness(50%);  width: 246px;  height: 180px;      position: relative;  z-index: -1;}
li:hover .image{        background: rgba(0, 255, 255, 0.5);}.image a{    height: 180px;           display: block;}
.text {  font-size: 30px;  color: #fff;  position: absolute;  z-index: -1;  top: 0;  padding-left: 10px;}

<!DOCTYPE html><html>    <head>        <title>TODO supply a title</title>        <meta charset="UTF-8">    </head>    <body>        <div class="row">          <div class="col-lg-12">            <ul>              <li>                <div class="image">                  <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a>                </div>                <div class="text">                  <p>Lorem Ipsum</p>                </div>              </li>              <li>                <div class="image">                  <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a>                </div>                <div class="text">                  <p>Lorem Ipsum</p>                </div>              </li>              <li>                <div class="image">                  <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a>                </div>                <div class="text">                  <p>Lorem Ipsum</p>                </div>              </li>            </ul>          </div>        </div>    </body></html>

Change background of li element on hover that has a current image in li

The problem you were having was related to apples and oranges. You had apples (IMG) tags on top of oranges (backgrounds)... so changing the background was working but your IMG was sitting on top of it - z-index would not help you. In this situation use background image alone. See below.

Edited: I see you also want them to be links. The following will work for you.

That said, I would actually use a sprite rather than have 6 different images in this situation. And, the CSS below could likely be optimized, and certainly optimized by using LESS or SASS - but it's nearly 4 on a Friday and the company micro tap was flowing ;)

<html>
<head>
    <style type="text/css">
        ul.grid {
          list-style: none;
          margin: 20px auto 0;
          width: 798px;  
        }

        .grid li {
          float: left;
          margin: 0px 4px 0px 0px;
        } 

        .container {
          margin-left: auto;
          margin-right: auto;
          margin-top:50px;
          width: 513px;
        }

        .grid li a {
          background-color: white;
          margin: 0;
          width: 50px;
          height:50px;
        }

        .grid li a {
          display: block;
          }

        .img1 {
          background: url(images/image1.jpg) no-repeat;
        }

        .img1:hover {
          background: url(images/image1_hover.jpg) no-repeat;
        }

        .img2 {
          background: url(images/image2.jpg) no-repeat;
        }

        .img2:hover {
          background: url(images/image2_hover.jpg) no-repeat;
        }

        .img3 {
          background: url(images/image3.jpg) no-repeat;
        }

        .img3:hover {
          background: url(images/image3_hover.jpg) no-repeat;
        }
    </style>
</head>

<body>
    <div class="container">
    <ul class="grid">
       <li><a href="link.html" class="img1"></a></li>
       <li><a href="link.html" class="img2"></a></li>
       <li><a href="link.html" class="img3"></a></li>
    </ul>
    </div>
</body>
</html>

html - image changing on li / a hover

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;
}

try this one

---

Related Topics