Question

这是一个单项目，我有三张CD图像可以旋转并在鼠标悬停时播放一首歌，但我也想改变背景图像。我已设法做到这一点，但当我在cd图像上盘旋时，背景和歌曲继续播放。如果我将鼠标放在导航栏上，它将返回正常背景。我希望在光标离开cd后将背景恢复为原始。我是新手，所以一个愚蠢的解释将不胜感激。

<head>
    <title>Learning HTML</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js"></script>

</head>

    <body id="bg">



<div id="imagesMain">

  <div class="imagesMain__item" onmouseover="PlaySound('mySound')" 
onmouseout="StopSound('mySound')">
    <div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
    <img id="album1" src="images/album1.png" />
  </div>
  <div class="imagesMain__item" onmouseover="PlaySound('smallThings')" 
onmouseout="StopSound('smallThings')">
    <div class="imagesMain__item__bg" style="background-image: url(images/bg2.png)"></div>
    <img id="album2" src="images/album2.png" />
  </div>
  <div class="imagesMain__item" onmouseover="PlaySound('firstDate')" 
onmouseout="StopSound('firstDate')">
    <div class="imagesMain__item__bg" style="background-image: url(images/bg1.png)"></div>
    <img id="album3" src="images/album3.png" />
  </div>

<audio id='mySound' src='sounds/blink182-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='smallThings' src='sounds/blink-182%20-%20All%20The%20Small%20Things-%5BAudioTrimmer.com%5D.mp3'/>
<audio id='firstDate' src='sounds/blink-182%20-%20First%20Date-%5BAudioTrimmer.com%5D.mp3'/>





</body>

CSS如下：

#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 300px;
text-align: center;
}
.imagesMain__item {
display: inline-block;
height: 300px;
position: relative;
width: 300px;
}
.imagesMain__item img {
cursor: pointer;
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: 100;
}
.imagesMain__item__bg {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
transition: all ease-in-out 0.1s;
transform: scale(0);
right: 0;
top: 0;
} 
.imagesMain__item:hover img {
animation-name: rotate; 
animation-duration: 0.8s; 
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.imagesMain__item:hover .imagesMain__item__bg {
opacity: 1;
transform: scale(1);
}

@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}


html {
height: 100%;
}
body {
background-image: url(images/bg.png);
background-size: cover;
background-repeat: no-repeat;
}

Answer 1

更改您的html设置：更改图像和bg容器的出现次数。

<div class="imagesMain__item">
    <img id="album1" src="http://www.clker.com/cliparts/d/6/9/a/11970932001393807721BenBois_Vinyl_records.svg.hi.png" />
    <div class="imagesMain__item__bg" style="background-image: url(https://lastfm-img2.akamaized.net/i/u/ar0/7ae6e40453913321b8badf504f192e16)"></div>
</div>

现在将悬停处理程序设置在旋转项目上而不是整个项目容器上。

.imagesMain__item > img:hover {
    animation-name: rotate; 
    animation-duration: 0.8s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.imagesMain__item > img:hover + .imagesMain__item__bg {
    opacity: 1;
    transform: scale(1);
}

您可以在此处查看：[{3}}

用于在鼠标悬停时更改背景图像并在悬停时恢复的CSS解决方案

1 个答案: