我有一個用于顯示/隱藏資訊的按鈕。我有一種顯示資訊時的樣式，以及隱藏時的另一種樣式。到目前為止，由于“button：focus”，我設法在單擊按鈕時更改了初始樣式，但是再次單擊時樣式保持不變。我基本上需要在每次點擊時在這兩種樣式之間切換樣式。有人能幫我嗎 ？
這是我的 CSS 樣式。
#button1 {
height:50px;
width:170px;
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
font-family: "Roboto", serif;
background-image: none;
box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
margin: 0 auto 0;
border-color: white;
color:white;
background-color:rgb(4, 30, 78);
border-radius: 30px;
}
#button1:hover {
background-color: white;
color:rgb(4, 30, 78);
border-color:rgb(4, 30, 78);
cursor:pointer;
}
#button1:focus{
background-color: white;
color:rgb(4, 30, 78);
border-color:rgb(4, 30, 78);
cursor:pointer;
}
uj5u.com熱心網友回復：
您可以在 onclick 事件上使用 javascript 來修改按鈕 classList，請查看下面的示例
#button1 {
height:50px;
width:170px;
border-style: solid;
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
font-family: "Roboto", serif;
background-image: none;
box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
margin: 0 auto 0;
border-color: white;
color:white;
background-color:rgb(4, 30, 78);
border-radius: 30px;
}
#button1.active {
background-color: white;
color:rgb(4, 30, 78);
border-color:rgb(4, 30, 78);
cursor:pointer;
}<button id="button1" onclick="this.classList.toggle('active')">Click Me</button>更多資訊請查看Element.classList
uj5u.com熱心網友回復：
首先，讓我們稍微清理一下您的代碼：
#button1 {
display: block; /* You need this, if the element is <a>*/
/*
* height: 50px; ???? padding-block:25px;
* width: 170px; ???? padding-inline:85px; width:min-content;
*/
width: min-content;
padding: 25px 85px;
/*
* margin: 0 auto 0;
1. You don't need the last 0
2. in this example margin: auto is enough
*/
margin: auto;
/*
* border-style: solid;
* border-color: white;
???? let's make them one
*/
border: medium solid white;
border-radius: 30px;
/*
* font-family: "Roboto", serif;
Roboto is a sans-serif font, I'm not sure you notice that or not. If I where you, I would use 'sans-serif' as it's fallback
ALSO
we can use the "font" shorthand
*/
font: 700 0.875rem "Roboto", sans-serif;
color: white;
letter-spacing: 1px;
text-transform: uppercase;
/*
* background-image: none; You Don't need it
*/
background-color: rgb(4, 30, 78);
box-shadow: 2px 2px 8px 0 rgba(128, 128, 128, 1);
}
#button1:hover {
background-color: white;
color: rgb(4, 30, 78);
border-color: rgb(4, 30, 78);
cursor: pointer;
/* cursor: pointer; moved to #button1*/
}
#button1:focus {
background-color: white;
color: rgb(4, 30, 78);
border-color: rgb(4, 30, 78);
/* cursor: pointer; moved to #button1*/
}<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div>
<a id="button1">cam_gis</a>
<!-- It's better to use class UNLESS you pretty sure why are you going to use an id -->
</div>
</body>
</html>現在，讓我們談談:focus您用于“單擊按鈕時的初始樣式”
:focusCSS 偽類表示已獲得焦點的元素（例如表單輸入）。MDN > :focus
The
:activeCSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.MDN > :active
Thus, I think :active could be a better choice.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436518.html