css padding属性正在同时更改所有类

xj3cbfub 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(110)

我尝试更改按钮的填充when：hover，但是当我将鼠标悬停在一个按钮上时，三个按钮同时更改填充，我希望它们单独进行。

.buttons {
    display: flex;
    font-size: 24px;
    padding: 10px;
}

.button {
    text-align: center;
    padding: 10px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}
  
.one:hover {
    padding: 25px;
    background-color: black;
}

<div class="buttons"> 
  <button class="button one"></button><a href="../new-odin-recipes/chikenpasta.html">Tomato & Basil Chiken Pasta</a></button>
    <button class="button two"><a href="../new-odin-recipes/BBQ-ribs.html">BBQ Ribs </a></button>
    <button class="button three"><a href="../new-odin-recipes/marsala.html">Chiken Marsala</a></button>
</div>

.one：hover可以单独改变背景颜色，但是padding不能。我试着从. button和.button中删除padding属性，但是它们仍然同时改变。这必须很简单，但是我快疯了，没有发现我做错了什么。

css

来源：https://stackoverflow.com/questions/75776641/the-padding-property-is-changing-all-classes-at-the-same-time

2条答案

按热度按时间

nzkunb0c1#

我编辑了你的代码如下。我添加了.buttons类display:inline和我把每个按钮在一个不同的div命名为buttons。在.css文件中的悬停设置，我写了一个，两个，一个接一个的三个类，并且对于每个button class命名为css和html文件中的1-2和3。我为按钮1-2设置了position:absolute-3并更改了margin-left值。另外，由于这个原因，我添加了.button类min-hieght:50px值并缩短了文本。我希望它对您有效。

.buttons {
    display: inline;
    font-size: 24px;
    padding: 10px;
}

.button1 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}

.button2 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left: 150px;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}

.button3 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left:300px;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}
  


.one:hover {
    padding: 25px;
    background-color: black;
}

.two:hover {
    padding: 25px;
    background-color: black;
}

.three:hover {
    padding: 25px;
    background-color: black;
}

<div class="buttons"> 
    <button class="button1 one"><a href="../new-odin-recipes/chikenpasta.html">Tomato & Pasta</a></button>
</div> 
<div class="buttons"> 
    <button class="button2 two"><a href="../new-odin-recipes/BBQ-ribs.html">BBQ Ribs </a></button>
   </div> 
   <div class="buttons"> 
    <button class="button3 three"><a href="../new-odin-recipes/marsala.html">Chiken Marsala</a></button>
   </div>

赞(0）回复(0）举报 2023-03-20

ljsrvy3e2#

添加“对齐项目：start“属性设置为.”buttons“类选择器。

.buttons {
    display: flex;
    align-items: start; // add this
    font-size: 24px;
    padding: 10px;
}

赞(0）回复(0）举报 2023-03-20

我来回答

css padding属性正在同时更改所有类

2条答案

相关问题

热门标签

最新问答