悬停在列表项目上时更改背景图像 [英] Changing background image when hovering on a list item

问题描述

正如你在截图中看到的，我有一个无序列表。现在这个列表的 div 有一个背景图片。我想要做的是每当将鼠标悬停在列表项上时更改背景图像。请注意，每个项目都应将背景更改为不同的图像。我该怎么做呢？我只找到答案如何更改为单个而不是多个图像。

下面是截图。

我已经在第一个

div 的CSS：

  .body {
 display：block; 
 float：left; 
 background-image：url（bgdef.jpg）; 
背景重复：不重复; 
 position：static; 
宽度：100％; 
 height：auto; 
保证金：0; 
} 
 
 .menu {
 width：250px; 
 padding：0; 
保证金：100px 0px 33％75％; 
 list-style-type：none; 
 -webkit-touch-callout：none; 
 -webkit-user-select：none; 
 -khtml-user-select：none; 
 -moz-user-select：none; 
 -ms-user-select：none; 
 user-select：none; 
 -webkit-user-drag：none; 
} 
 
 .menu a：link，
 a：visited，
 a：hover，
 a：active {
 text-decoration：none; 
 bottom：auto; 
 padding-bottom：auto; 
 text-shadow：none; 
} 
 
 .menu li {
 background-color：white; 
 margin：10px; 
 padding：3px 0 3px 10％; 
 border-radius：10PX 0 0 10px; 
 font-size：20px; 
} 
 
 .menu li：hover {
 background-color：green; 
 margin-right：18px; 
 margin-left：1px; 
} 
  

解决方案

只要。这是一个窍门，在大多数情况下你需要使用JS，但它的工作和工作都很好！ （请参阅完整页面）

.wrapper {width：900px;高度：600像素; position：relative;}。item {position：relative; z-index：1;}。bg {position：absolute;顶部：0;左：0;宽度：100％; height：100％;}。bg img {position：absolute;顶部：0;左：0;宽度：100％;高度：100％;不透明度：0; transition：all .3s ease;}。bg img：nth-​​child（1），item item：n-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>商品1< / div> < div class =item>第2项< / div> < div class =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>

As you can see in the screenshot, I've got an unordered list. Now the div of this list has a background image. What I want to do is to change background's image whenever I hover the mouse on a list item. Note that every item should change background to a different image. How do I do this? I've only found answers how to change to a single, not multiple images.

Here's the screenshot.

I've already hovered on the first item of the list.

div's CSS:

.body {
  display: block;
  float: left;
  background-image: url("bgdef.jpg");
  background-repeat: no-repeat;
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
}

.menu {
  width: 250px;
  padding: 0;
  margin: 100px 0px 33% 75%;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.menu a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  bottom: auto;
  padding-bottom: auto;
  text-shadow: none;
}

.menu li {
  background-color: white;
  margin: 10px;
  padding: 3px 0 3px 10%;
  border-radius: 10PX 0 0 10px;
  font-size: 20px;
}

.menu li:hover {
  background-color: green;
  margin-right: 18px;
  margin-left: 1px;
}

解决方案

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>

这篇关于悬停在列表项目上时更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！