【发布时间】：2022-01-24 22:43:38
【问题描述】：
我正在制作一个带有 sidd nav-var 的文本编辑器。当鼠标悬停在导航栏上时，它的宽度会增加，而编辑器的宽度会减小。但是即使我创建的宽度变量发生变化，编辑器的宽度也不会改变。
这是我的程序：
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap');
:root {
--nav-btn-width: 40px;
--nav-width: calc(100% - 60px);
}
* {
z-index: 1;
}
body {
padding: 0;
margin: 0;
background-color: #c73737;
}
#navbar {
position: absolute;
height: 100%;
width: 50px;
max-width: 200px;
background-color: #0068ad;
display: flex;
flex-direction: column;
transition: 0.35s ease-in-out;
padding-top: 10px;
box-sizing: border-box;
z-index: 2;
}
#navbar:hover {
width: 200px;
border-radius: 0 10px 10px 0;
--nav-btn-width: 190px;
--nav-width: calc(100% - 210px);
}
.nav-btn {
width: var(--nav-btn-width);
height: 40px;
background-color: rgb(0, 184, 70);
margin: 5px;
cursor: pointer;
border-radius: 50px;
transition: 0.35s ease-in-out;
box-sizing: border-box;
display: flex;
flex-direction: row;
padding-left: 7.5px;
overflow: hidden;
user-select: none;
z-index: 10;
}
.nav-btn:hover {
background-color: rgb(0, 255, 98);
}
#signout {
position: absolute;
bottom: 10px;
}
.nav-text {
position: relative;
top: 10px;
font-size: 12pt;
font-family: 'JetBrains Mono', monospace;
font-weight: bold;
text-align: center;
padding-left: 10px;
}
#editor {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: var(--nav-width);
background-color: rgb(78, 78, 78);
}<!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>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="body-container" style="width: 100vh;height:100vh">
<div id="navbar">
<div id="create" class="nav-btn">
<img src="add_black_24dp.svg" alt="" id="create-icon" class="nav-icons">
<div id="create-text" class="nav-text">Create</div>
</div>
<div id="files" class="nav-btn">
<img src="description_black_24dp.svg" alt="" id="files-icon" class="nav-icons">
<div id="files-text" class="nav-text">My Files</div>
</div>
<div id="feed" class="nav-btn">
<img src="article_black_24dp.svg" alt="" id="feed-icon" class="nav-icons">
<div id="feed-text" class="nav-text">Feed</div>
</div>
<div id="challenges" class="nav-btn">
<img src="task_black_24dp.svg" alt="" id="challenges-icon" class="nav-icons">
<div id="challenges-text" class="nav-text">Challenges</div>
</div>
<div id="leaderboard" class="nav-btn">
<img src="leaderboard_black_24dp.svg" alt="" id="leaderboard-icon" class="nav-icons">
<div id="leaderboard-text" class="nav-text">Leaderboard</div>
</div>
<div id="notification" class="nav-btn">
<img src="notifications_black_24dp.svg" alt="" id="notification-icon" class="nav-icons">
<div id="notification-text" class="nav-text">Notifications</div>
</div>
<div id="chat" class="nav-btn">
<img src="message_black_24dp.svg" alt="" id="chat-icon" class="nav-icons">
<div id="chat-text" class="nav-text">Dev Chat</div>
</div>
<div id="settings" class="nav-btn">
<img src="settings_black_24dp.svg" alt="" id="settings-icon" class="nav-icons">
<div id="settings-text" class="nav-text">Settings</div>
</div>
<div id="signout" class="nav-btn">
<img src="logout_black_24dp.svg" alt="" id="signout-icon" class="nav-icons">
<div id="signout-text" class="nav-text">Sign out</div>
</div>
</div>
<div id="editor"></div>
</div>
<!-- include script.js and styler.js -->
<script src="script.js"></script>
<script src="styler.js"></script>
<script>
</script>
</body>
</html>如您所见，导航栏和编辑器之间有 10 像素的间隙，我还更新了悬停时的值。但是当导航栏悬停时，编辑器的宽度不会改变。
类似问题： link
我也尝试过类似问题中提到的内容，但还是不行...
变量
--nav-btn-width按预期工作，但变量--nav-width不起作用，即使两者的用法完全相同。
【问题讨论】：