gpt4 book ai didi

html - CSS Hover 适用于一个元素,但不适用于其他元素

转载 作者:行者123 更新时间:2023-12-02 18:16:30 27 4
gpt4 key购买 nike

我尝试制作一个左右分屏样式的页面。为此,我使用了一个 div ,左侧有一个标题,右侧有一个标题。我的目标是当鼠标悬停时使它们变大,同时使另一个变小。这对于将鼠标悬停在屏幕左侧非常有用,但是当将鼠标悬停在屏幕右侧时,左侧部分不会变小。我两边都做的一模一样,可能是元素的特殊性或者顺序有问题

(我简化了代码,这就是为什么有 VH 和 VW 的奇怪方式)

* {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#Left {
height: 100vh;
width: 50vw;
background: black;
color: rgb(127, 127, 127);
text-align: right;
position: fixed;
top: 0;
left: 0;
z-index: 0;
transition-property: width, color;
transition-duration: 500ms;
}

#Right {
background: white;
height: 100vh;
width: 50vw;
color: rgb(127, 127, 127);
text-align: left;
position: fixed;
top: 0;
right: 0;
transition-property: width, color;
transition-duration: 500ms;
}

h1 {
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
font-size: min(12vw, 15vh, 20em);
}


/*
Hover Effects
*/

#Right:hover {
width: calc(50vw + 31vh);
color: black;
}

#Right:hover #Left {
width: calc(50vw - 31vh);
}

#Left:hover {
width: calc(50vw + 31vh);
color: white;
}

#Left:hover~#Right {
width: calc(50vw - 31vh);
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aloïs Jolliet</title>
<link rel="stylesheet" href="./main.css">
</head>

<body>
<div id="Left">
<h1>Left</h1>
</div>
<div id="Right">
<h1>Right</h1>

</div>
</body>

</html>

最佳答案

https://codepen.io/nkoroloff/pen/ZEvQoqw?editors=1111

我分享了一个解决方案,希望对你有帮助。如果没有额外的脚本,您将无法更改元素的大小...

jQuery 脚本

$(function() {
$('#Right').mouseenter(function() {
$('#Left').addClass("hover-right");
}).mouseleave(function () {
$('#Left').removeClass("hover-right");
});
});

和简单的 CSS

#Left.hover-right {
width: calc(50vw - 31vw);
}

关于html - CSS Hover 适用于一个元素,但不适用于其他元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71519329/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com