Có ai sửa giúp mình dòng code nay được ko ??? Code Csss

tuilajboy · lúc 19:46 Hôm qua

cho mình hỏi trong dòng code này mình sai chỗ nào mà khi hover qua button thì phần menu không hiện vậy

code HTML : "
<!DOCTYPE html>
<html>
<head>
<title>My Family</title>
<link rel="stylesheet" href="homepage.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body>
<div id="total">
<button id="hideshow">Show/Hide</button>
<div id="timeline">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
</div>
</div>
</body>
</html>
"

code css : "
*{
font-family: "Afacad Flux", sans-serif;
}
body{
background-repeat: auto;
--angle: 45deg;
background: linear-gradient(var(--angle), oklab(92.6% 0.027 0.032), oklab(92.8% 0.023 0.03), oklab(90.1% 0.039 0.028), oklab(87% 0.053 0.029))
}
button{
padding: 15px 30px;
display: flex;
float: right;
}
#timeline{
height: 90%;
background-color: aliceblue;
position: absolute;
top:60px;
right: 0;
display: none;
z-index: 1;
}
#timeline a {
padding: 15px 16px;
display: block;
min-width: 200px;
text-decoration: none ;
text-align: center;

}
#timeline a:hover{
background-color: aquamarine;
}
#hideshow:hover #timeline{display: block;}

"

Trong Le · lúc 20:59 Hôm qua

bạn lên hỏi GPT thử xem, nó chỉ lỗi sai chỗ nào và sửa lại cho bạn luôn!

ryanr1 · lúc 22:00 Hôm qua

tuilajboy nói:
cho mình hỏi trong dòng code này mình sai chỗ nào mà khi hover qua button thì phần menu không hiện vậy

<div id="total">
<button id="hideshow">Show/Hide</button>
<div id="timeline">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
</div>
</div>

phần tử div#timeline nó đồng cấp với button#hideshow, nhưng trong css thì bạn lại viết như vầy:

#hideshow:hover #timeline{display: block;}

tức là bạn khi button hover nó sẽ gán thuộc tính {display: block;} cho div#timeline NẰM BÊN TRONG phần tửbutton#hideshow,

Cách fix: 1 trong 2 cách, 1 sửa css, 2 là sửa html

css:
/*khi button được hover thì gắn thuộc tính display: block cho #timeline nằm bên dưới button#hideshow, đồng cấp với button#hideshow, đều có parent element là div#total */
button:hover ~ #timeline{
display: block;
}

Bạn tìm hiểu về pseudo "~" thêm nhé

HTML thì bạn đặt div#timeline vào bên trong phần tử button, lúc này button là parent của div#timeline, không phải div#total. Cách fix này thì bạn cần phải fix thêm css của div#timeline

html:

<div id="total">
<button id="hideshow">Show/Hide
<div id="timeline">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
</div>
</button>
</div>

ryanr1 · lúc 22:01 Hôm qua

lần sau có hỏi thì đăng source code lên https://codepen.io/ nhé

Có ai sửa giúp mình dòng code nay được ko ??? Code Csss

tuilajboy

Gà con

Chủ đề tương tự

Trong Le

Rìu Vàng

ryanr1

Búa Gỗ

ryanr1

Búa Gỗ

Có ai sửa giúp mình dòng code nay được ko ??? Code Csss

tuilajboy

Gà con

Chủ đề tương tự

Trong Le

Rìu Vàng

ryanr1

Búa Gỗ

ryanr1

Búa Gỗ

Privacy & Transparency

Privacy & Transparency