Question

所以，我几乎没有做任何设计，我正在尝试它，但我想我在我的html和CSS中使用class和id时我认为有问题，因为我正在考虑它从编程的角度来看。我认为类是一种父类，id代表一个孩子，他们可以在拥有属性的同时继承属性;然而，虽然在某些方面这似乎有效，但是当我将鼠标悬停在它们上面时，我的过渡效果并不像我期望的那样。我有一个无序的按钮列表，如

<li><button  type = "button" id = "first">Press Me</button></li>

和这个css：

button {
    padding: 15px;
    font-size: 24px;
    border-radius: 25px;

    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;

    transition: all 0.2s linear 0.2s;
    }

#first{
    background-color:#ff9bcd;
    border: 5px double #ffffff;
}

#second{
    background-color:#ff9bcd;
    border: 5px double #9bffcd;
}

#third{
    background-color:#ffffff;
}

button:hover{
    background:#9bffcd;
    border: 5px dotted #ff9bcd;
    color:#9bffcd;
}

首先只有颜色过渡，第二次只有边界过渡，第三次只有背景和颜色过渡。似乎转换仅适用于我没有覆盖的属性。反正是保留这些过渡同时保持其各自的属性吗？我可能会覆盖其他按钮的这些转换，但我只是好奇我将如何为某些按钮维护它。感谢

Answer 1

虽然编写可重用代码总是更喜欢class而不是id，这将帮助您非常轻松地覆盖属性，而且您不必明确。

所以，这是你需要的例子。我认为这对你有用。

HTML

<button  type="button" class="first">Press Me</button>
<button  type="button" class="second">Press Me</button>
<button  type="button" class="third">Press Me</button>

CSS

button {
    padding: 15px;
    font-size: 24px;
    border-radius: 25px;

    -webkit-transition: all 0.2s linear 0.2s;
    -moz-transition: all 0.2s linear 0.2s;
    -o-transition: all 0.2s linear 0.2s;

    transition: all 0.2s linear 0.2s;
}

.first{
    background-color:#ff9bcd;
    border: 5px double #ffffff;
}

.second{
    background-color:#ff9bcd;
    border: 5px double #9bffcd;
}

.third{
    background-color:#ffffff;
}

button:hover{
    background:#9bffcd;
    border: 5px dotted #ff9bcd;
    color:#fff;
}

链接到Fiddle。

有一个很好的代码日。

Answer 2

将伪:hover选择器放到每个按钮ID选择器。

尝试：#first:hover { ... } #second:hover { ... } #third:hover { ... }

如何制作具有相同过渡和某些相同属性的按钮，但是还具有一些不同的属性？

2 个答案: