目前，我正在開發 nextJS Web 應用程式，并且在 css 方面存在一些問題。我有一個 div（父節點）并且在 div 中有多個子元素。因此，每當我將滑鼠懸停在 上時parent div element，我都希望它也觸發在 上child elements。
例如，這是我的代碼的簡化版本
export default function portfolio() {
return (
<div className={homeStyles.mainContent}>
<div className={homeStyles.titleNum}>
<h2>01</h2>
</div>
<div className={homeStyles.titleName}>
<h2>Telegram Bot</h2>
</div>
</div>
)
}
因此，每當我將滑鼠懸停在父 div (.mainContent) 上時，它都會更改背景顏色以及子元素（標題編號和標題名稱）、更改字體顏色并增加字體大小simultaneously。
任何人都可以啟發我如何使用 nextJS 實作它。謝謝你。
已編輯
不確定這有效嗎？
<div hljs-selector-tag">main">
<div >Num</div>
<div >Name</div>
</div>.main {
background: blue;
}
.main:hover {
background: green;
}
.main:hover .num,
.main:hover .name {
color: red;
font-weight: bold;
}有一個更好的方法嗎？因為它看起來有點亂，尤其是當我一次性觸發大約 6 個子元素時。無論如何要制作代碼more concise and slick？
uj5u.com熱心網友回復：
您可以使用這些 CSS 規則：
.main {
background-color: #ccc;
}
.main:hover {
background-color: #aaa;
}
.main:hover > div {
color: red;
font-weight: bold;
}<div class="main">
<div class="num">Num</div>
<div class="name">Name</div>
</div>uj5u.com熱心網友回復：
>在懸停后添加，然后添加. classname of the element that you wanna change.
- 這可能不適用于所有情況。但是對于純 html 和 css，它可以作業。
.parentClass{
height: 300px;
width: 300px;
background-color: red;
}
.childClass{
background-color: blue;
height: 150px;
width: 150px;
}
/* This is where you define the hover effect */
.parentClass:hover > .childClass {
background-color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div class="parentClass">
<div class="childClass">
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/396937.html
上一篇：網頁中按鈕的奇怪突出顯示