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

tuilajboy · 9/10/24

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:[email protected]&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 · 9/10/24

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 · 9/10/24

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 · 9/10/24

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

Adblocker detected! Please consider reading this notice.

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ỗ

ĐANG THẢO LUẬN

ĐỪNG BÕ LỠ

Bài Viết Mới