<div class="projects-list home-1">
<article class="whispers">
<h1>Whispers</h1>
<figure>
<a href="/projects/whispers.html">
<img src="assets/media/images/whispers.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>Victoria</h1>
<figure>
<a href="projects/after-august.html">
<img src="assets/media/images/victoria.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>for sasha</h1>
<figure>
<a href="projects/for-sasha.html">
<img src="assets/media/images/fosasha.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>old and blue</h1>
<figure>
<a href="projects/old-and-blue.html">
<imgsrc="assets/media/images/oldandblue.jpg"alt="">
</a>
</figure>
</article>
<article>
<h1>offf barcelona</h1>
<figure>
<a href="projects/offf-barcelona.html">
<img src="/assets/media/images/offf-barcelona.jpg" alt="">
</a>
</figure>
</article>
</div>
现在,我想在任何这些图像上悬停时将body标签背景更改为不同的颜色,例如第一个图像使背景变黑,第二个图像使背景变红,等等。
所以我的问题是:有没有办法在悬停时选择CSS上的另一个元素?
例如:
article:hover { here i want to say like body: background = 'whatever' }
就像我们如何更改JS中的内容一样。我是用JS实现的,但是我觉得必须有一种更简单的CSS方式
答案 0 :(得分:1)
不幸的是,CSS中没有父/祖先选择器。因此,您将需要一个JS解决方案来设置正文或祖先元素的样式。
您可以在没有jQuery的情况下轻松地做到这一点。
const elements = document.querySelectorAll('article');
elements.forEach(elem => {
elem.addEventListener("mouseenter", function(event) {
const bg = document.querySelector('.projects-list')
const color = event.target.getAttribute("data-color");
bg.style.backgroundColor = color;
}, false)
})
.projects-list {
padding: 20px;
}
img {
width: 100%;
}
<div class="projects-list home-1">
<article data-color="orange" class="whispers">
<h1>Whispers</h1>
<figure>
<a href="">
<img src="https://placeimg.com/640/480/any" alt="" </a>
</figure>
</article>
<article data-color="purple">
<h1>Victoria</h1>
<figure>
<a href="#">
<img src="https://placeimg.com/640/480/any" alt="" </a>
</figure>
</article>
<article data-color="blue">
<h1>for sasha</h1>
<figure>
<a href="#">
<img src="https://placeimg.com/640/480/any" alt="" </a>
</figure>
</article>
<article data-color="red">
<h1>old and blue</h1>
<figure>
<a href="#">
<img src="https://placeimg.com/640/480/any" alt="">
</a>
</figure>
</article>
<article data-color="green">
<h1>offf barcelona</h1>
<figure>
<a href="#">
<img src="https://placeimg.com/640/480/any" alt="">
</a>
</figure>
</article>
</div>
答案 1 :(得分:0)
SELECT
dt.ID,
@row_num := IF(@aid <> dt.animalid, 1, @row_num + 1) as LactationID,
concat(@row_num, ' - ', calvDate) AS CalvDateLactationID,
concat(@row_num, ' - ', animalid) AS animalidLactationID,
@aid := dt.animalid AS animalid,
dt.calvDate
FROM
(
SELECT ID,animalid,calvDate
FROM calvingdatecombined
WHERE calvDate > '0000-00-00'
ORDER BY animalid, calvDate, ID
) AS dt
CROSS JOIN (SELECT @row_num := 0,
@aid := '') AS user_init_vars
ORDER BY dt.ID
$(document).ready(function(){
$('img').mouseover(function(){
$('body').css('background-color',$(this).data('color'));
});
});
使用js实现此目的。希望对您有帮助。
答案 2 :(得分:0)
这是完整的代码束。进行一些更改后,我想向您致歉。
<!DOCTYPE html>
<html>
<head>
<style>
body { background:#e5e5e5;}
.projects-list-home-1{
text-align:center;
}
.whispers{
text-decoration:none;
}
</style>
<script>
function bgChange(bg) {
document.body.style.background = bg;
}
</script>
</head>
<body>
<div class="projects-list-home-1">
<article>
<h1>Whispers</h1>
<figure>
<a href="/projects/whispers.html" onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')" style="background-color:Khaki" class="whispers">
<img src="assets/media/images/whispers.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>Victoria</h1>
<figure>
<a href="projects/after-august.html" onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')" style="background-color:Palegreen" class="whispers">
<img src="assets/media/images/victoria.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>for sasha</h1>
<figure>
<a href="projects/for-sasha.html" onmouseover="bgChange(this.style.backgroundColor)"
onmouseout="bgChange('transparent')" style="background-color:Orange" class="whispers">
<img src="assets/media/images/fosasha.jpg"alt=""
</a>
</figure>
</article>
<article>
<h1>old and blue</h1>
<figure>
<a href="projects/old-and-blue.html">
<imgsrc="assets/media/images/oldandblue.jpg"alt="">
</a>
</figure>
</article>
<article>
<h1>offf barcelona</h1>
<figure>
<a href="projects/offf-barcelona.html">
<img src="/assets/media/images/offf-barcelona.jpg" alt="">
</a>
</figure>
</article>
</div>
</body>
</html>