我怎样才能用相同的伪 class 更改我的边框颜色和标签颜色

Question

大家好，我是一名 Web 开发新手，我正在制作一个 practice.I 想要在我悬停到“容器”时更改我的 span 的标签颜色（顺便说一句，我也想更改我的边框属性，如您在我的代码（容器：悬停））

我希望我解释得很好

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/*  font-family: 'Open Sans', sans-serif;*/

body{
    background-color: #14213d;
    margin: 0;
    
}
.container li{
    list-style: none;
}

.container{
    border:  2px solid #fca311;
    width: 400px;
    height: 100px;
    position: relative;
    left: 720px;
    top: 400px;
}
#mainm{
    font-family: 'Open Sans', sans-serif;
    color: #e63946;
    font-size: 25px;
    padding-left: 5px;
    padding-top: 15px;
}
.container:hover{
    transition: 2s;
    border-radius: 15px;
    border-color: #43aa8b;
    background-color: #43aa8b;
}
#mainm:hover{
    color: white;
}

<!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">
</head>
<body>
    <div class="container">
        <ul>
            <li id="mainm">Site Hazırlanma Aşamasında</li>
        </ul>
    </div>


</body>
</html>

Answer 1

将 container 样式移动到 #mainm 并将 color: white; 添加到 :hover.

记下我更改的其他样式以稍微清理一下。我将 text-align: center; 添加到 id 并删除了高度。而不是固定高度，只需使用填充。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

/*  font-family: 'Open Sans', sans-serif;*/

body {
  background-color: #14213d;
  margin: 0;
}

.container li {
  list-style: none;
}

.container {
  width: 100%;
  height: 100%;
}

li#mainm {
  border: 2px solid #fca311;
  width: 400px;
  padding: 30px 0px;
  position: relative;
  left: 720px;
  top: 400px;
}

#mainm {
  font-family: 'Open Sans', sans-serif;
  color: #e63946;
  font-size: 25px;
  text-align: center;
}

#mainm:hover {
  transition: 2s;
  border-radius: 15px;
  border-color: #43aa8b;
  color: white;
  background-color: #43aa8b;
}

<!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">
</head>

<body>
  <div class="container">
    <ul>
      <li id="mainm">Site Hazırlanma Aşamasında</li>
    </ul>
  </div>


</body>

</html>

Answer 2

:root {
  --colorsame: #1e90ff;
}

.container{
    border:  2px solid var(--colorsame);
    width: 400px;
    height: 100px;
    position: relative;
    left: 720px;
    top: 400px;
}
#mainm{
    font-family: 'Open Sans', sans-serif;
    color: var(--colorsame);
    font-size: 25px;
    padding-left: 5px;
    padding-top: 15px;
}

我怎样才能用相同的伪 class 更改我的边框颜色和标签颜色

how can i change my border's color and label's color with same psuedo class

html

css

pseudo-element