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

Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))

I hope I explained myself well

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


</body>
</html>

CodePudding user response：

Move the container styles to #mainm and add the color: white; to :hover.

Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.

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


</body>

</html>

CodePudding user response：

: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;
}