我如何使用相同的伪类更改边框的颜色和标签的颜色

发布于 2025-01-09 14:34:27 字数 1514 浏览 1 评论 0原文

你好，我是一名初学者 Web 开发人员，正在练习。当我将鼠标悬停到“容器”时，我想更改跨度的标签颜色（顺便说一句，我也想更改边框的属性，正如您在我的代码中看到的那样（容器：悬停））

我希望我能很好地解释自己

@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>

原文

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


</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝不放开 2025-01-16 14:34:27

将 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>

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


</body>

</html>

回复收藏 0 原文

乱世争霸 2025-01-16 14:34:27

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

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

回复收藏 0 原文

~没有更多了~