Html 当鼠标悬停在上面的图像上时，如何更改滑块的不透明度？

所以，我有一个图像，它播放音频，并在单击时更改图像。我在图像下方还有一个音量滑块。我的问题是，当鼠标悬停在图像上时，如何使滑块淡入淡出

当鼠标悬停在滑块本身而不是图像上时，滑块将显示在上方。我曾尝试将不透明度设置为一个变量，并通过JavaScript对其进行更改，但这似乎没有起到任何作用

功能咖啡改变（）{
如果（Coffee.src==”https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png）{
Coffee.src=”https://static.wixstatic.com/media/38d0c2_37f01de3219a4804a3cb29f39e57b48c~mv2.png”；
}否则{
Coffee.src=”https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png”；
}}
document.getElementById（“Coffee”）.onclick=function（）{
咖啡换
var audio=document.getElementById（“CoffeeAudio”）；
如果（audio.paused）audio.play（）；
else-audio.pause（）；
};
音量。添加视频列表（“mousemove”，coffeeVolume）；
函数coffeeVolume（）{
document.getElementById（“CoffeeAudio”）.volume=document.getElementById（“volume”）.value/100；
}

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100px；
高度：15px；
边界半径：5px；
背景#d3；
大纲：无；
-webkit转换：.2s；
转变：不透明度；
位置：相对位置；
顶部：130像素；
不透明度：0；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}

---

您需要颠倒

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100px；
高度：15px；
边界半径：5px；
背景#d3；
大纲：无；
-webkit转换：.2s；
转变：不透明度；
位置：相对位置；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
.slidecontainer{
不透明度：0；
过渡：不透明度.3s立方贝塞尔（.4,0,2,1）；
}
.slidecontainer:悬停，
#咖啡：悬停+滑动容器{
不透明度：1；
}
好的，您可以做的一件事是将
和.slidecontainer包装在一个div中，并将鼠标放在这个包装上，就像

最后将其添加到css中并删除.slider:hover

   <section id="CoffeeAndSlider" onmouseover="showSlider('unhide')"onmouseout="showSlider('hide')">
            <div class="slidecontainer">
              <input type="range" min="0" max="100" value="100" class="slider" id="volume">
            </div>

            <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
            height="100" width="100">
     </section>

伙计，非常感谢你！成功了。我不熟悉CSS和HTML，所以这是一个学习曲线。谢谢
.slidecontainer {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1); /* optional: fade transition */
}
.slidecontainer:hover, #Coffe:hover + .slidecontainer {
  opacity: 1;
  z-index: 1; /* optional: if img and the slider overlap, you want the slider on top */
}

   <section id="CoffeeAndSlider" onmouseover="showSlider('unhide')"onmouseout="showSlider('hide')">
            <div class="slidecontainer">
              <input type="range" min="0" max="100" value="100" class="slider" id="volume">
            </div>

            <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
            height="100" width="100">
     </section>

function showSlider(flag){
 if(flag==='unhide'){
    document.getElementById('volume').classList.add("unhide");
 }
 else if(flag==='unhide'){
 document.getElementById('volume').classList.remove("unhide");
 }
}

.unhide{
    opacity: 1;
}