所以我在图像上有一个按钮，我想在用户将鼠标悬停在图像上时更改颜色。
按钮本身的CSS
.prev{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
这是html
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_fjords.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
这是我正在尝试使用的 CSS。 div.mySlides 是包含我的图像的 div。
.prev {
color:white;
}
div.mySlides:hover + .prev, .prev:hover {
color:red;
}
我正在使用的 javascript
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
目前只有当用户将鼠标悬停在按钮位置时颜色才会改变。我试过更改 about 在 css 中的顺序，但发现没有任何效果。
最佳答案
所以您基本上已经可以工作了，仅适用于最后一个 .mySlides 元素，因为您只选择了紧随其后的 .prev 兄弟(使用相邻兄弟组合器 +)，而不是 所有 拥有该类的其他 sibling ，无论他们在悬停的 div 之后有多“远”——这就是 ~，普通 sibling 组合器。
下面的基本示例表明它在原则上是有效的(无需经过添加实际图像或其他样式的麻烦。)
.prev {
color:blue;
}
div.mySlides {
margin:.5em 0;
padding: .5em;
border: 1px solid;
cursor: pointer;
}
div.mySlides:hover ~ .prev, .prev:hover {
color:red;
}<div id="myModal" class="modal">
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>关于html - 仅在图像悬停时更改按钮的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48174907/