Question

body {
    background: url(http://i.imgur.com/LMYkPk3.jpg) no-repeat center center fixed;
    background-size: cover;
}

button {
    display:inline-block;
    margin: 0 10px 0 0;
    padding: 5px 20px;
    font-size: 15px;
    font-family: cursive;
    line-height: 1.8;
    appearance: none;
    box-shadow: none;
    border-radius: 20px;
}

button:focus {
    outline: none;
}

section.flat button {
  color: #fff;
  background-color: transparent;
  text-shadow: -1px 1px #417cb8;
  border: none;
}

section.flat button:hover,
section.flat button.hover {
  background-color: transparent;
    border: 2px solid orange;
}

section.flat button:active,
section.flat button.active {
  background-color: mintcream;
  text-shadow: -1px 1px #193047;
  color: black;
}

<!DOCTYPE html>
    <html lang="en">
      <head>
         <link rel="stylesheet" href="style.css" type="text/css"/>
            <title></title>
               </head>
             <body>
            <div id="line"></div>
            
<section class="flat">
    <button>button</button>
    <button>another</button> <!-- works fine if just one button ... but as soon as there more they all "selects" when hovered over one (change of depth ...) -->
    
</section>
   
     
            
            
            
            
            </body>
            
</html>

我的问题：我的页面上有两个按钮，它们的行为似乎都相同。但当我将鼠标悬停在其中一个上时，它们都会改变它们的行为（深度）。我怎么能避免这个？

Answer 1

您只需要为不同的按钮添加不同的ID，以使它们可以单独区分。然后使用这两个ID执行单独的样式。我修改了你的代码，这里是工作代码 -

<body>
        <div id="line"></div>

<section class="flat">
<button id = "btn1">button</button>
<button id="btn2">another</button> 

  </section>
</body>
<!--the css-->
button {
display:inline-block;
margin: 0 10px 0 0;
padding: 5px 20px;
font-size: 15px;
font-family: cursive;
line-height: 1.8;
appearance: none;
box-shadow: none;
border-radius: 20px;
    }

   button:focus 
  {
outline: none;
   }
   #btn1 {
       background-color: #f0f0f8;
     }



    section.flat button:hover,
      section.flat button.hover {
     background-color: transparent;
      border: 2px solid orange;
        }

   #btn1:active,
    section.flat button.active {
     background-color: mintcream;
    text-shadow: -1px 1px #193047;
    color: black;
        }

我已经修改了你的CSS只是为了说明它是如何工作的。正如您在下面的小提琴中看到的那样，按钮具有不同的backgroung-color。干杯！

Working JSfiddle

Answer 2

您需要执行<button id="btn-1"></button>，<button id="btn-2"></button>等，因此每个按钮都有一个ID。这是预期的行为，因为每个按钮没有唯一标识符。你的css告诉它按下每个按钮，而不是特定按钮。

如何给几个按钮不同的样式，使它们“表现”为个体

2 个答案: