Question

你好，任何人都可以帮助我，我有这个按钮，当我把鼠标放在每个按钮上时，我希望从它们中的每个按钮进行转换，但是即使每个按钮都有不同的类，它似乎只适用于第一个按钮。似乎：悬停不适用于所有人。

CSS代码：

.first{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}

.second{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}

.last{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}

#type{
    border-radius:100%;
    border: none;
    height: 100%;
    width:100%;
    background-color: #2EFEF7;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}

#type1{
    border-radius:15%;
    border:none;
    height: 100%;
    width:100%;
    background-color: #01A9DB;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}

#type2{
    border:none;
    height: 100%;
    width:100%;
    background-color: #0404B4;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
    .first:hover #type{
    transition:2s;
    left:0;
};

    .second:hover #type1{
        transition:2s;
        left:0;
    };

    .last:hover #type2{
        transition:2s;
        left:0;
    };

HTML code：

<html>
<head>
    <title>buttons</title>
    <link href="style.css" rel="stylesheet" media="all">
</head>
<body bgcolor="#F6CED8">
<!-- <div clas="gen"> -->
    <div class="first">
        <button type="submit" id="type">Click Here!</button>
    </div>
    <div class="second">
        <button type="submit" id="type1">Click Here!</button>
    </div>
    <div class="last"> 
        <button type="submit" id="type2">Click Here!</button>
    </div>
<!-- </div> -->
</body>
</html>

Answer 1

http://jsfiddle.net/4L3ec/

我将宽度和高度更改为100px而不是％，b.c我甚至看不到没有它的按钮。但是我发布的小提琴现在很有用。

.first {
    width: 100px;
    height: 100px;
    position: relative;
    border:2px solid black;
}
.second {
    width: 100px;
    height: 100px;
    position: relative;
    border:2px solid black;
}
.last {
    width: 100px;
    height: 100px;
    position: relative;
    border:2px solid black;
}
#type {
    border-radius:100%;
    border: none;
    width: 100px;
    height: 100px;
    background-color: #2EFEF7;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
#type1 {
    border-radius:15%;
    border:none;
    width: 100px;
    height: 100px;
    background-color: #01A9DB;
    color:#FFFFFF;
    position: absolute;
    transition:2s;
    left: -4em;
}
#type2 {
    border:none;
    width: 100px;
    height: 100px;
    background-color: #0404B4;
    color:#FFFFFF;
    position: absolute;
    transition:2s;
    left: -4em;
}
.first:hover #type {
    transition:2s;
    left:0;
}
.second:hover #type1 {
    transition:2s;
    left:0;
}
.last:hover #type2 {
    transition:2s;
    left:0;
}
.body {
    width: 100%;
    height: 100%;
}

Answer 2

您的CSS无效。删除;之后的额外}，它将起作用

.first {
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}
.second {
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}
.last {
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}
#type {
    border-radius:100%;
    border: none;
    height: 100%;
    width:100%;
    background-color: #2EFEF7;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
#type1 {
    border-radius:15%;
    border:none;
    height: 100%;
    width:100%;
    background-color: #01A9DB;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
#type2 {
    border:none;
    height: 100%;
    width:100%;
    background-color: #0404B4;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
.first:hover #type {
    transition:2s;
    left:0;
}

 .second:hover #type1 {
    transition:2s;
    left:0;
}

 .last:hover #type2 {
    transition:2s;
    left:0;
}

Fiddle

Answer 3

Here jsfiddle回答。

.first{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}

.second{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}

.last{
    width:10%;
    height: 20%;
    position: relative;
    border:2px solid black;
}
#type {
    border-radius:100%;
    border: none;
    width: 100px;
    height: 100px;
    background-color: #2EFEF7;
    color:#FFFFFF;
    position: absolute;
    left: -4em;
    transition:2s;
}
#type1 {
    border-radius:15%;
    border:none;
    width: 100px;
    height: 100px;
    background-color: #01A9DB;
    color:#FFFFFF;
    position: absolute;
    transition:2s;
    left: -4em;
}
#type2 {
    border:none;
    width: 100px;
    height: 100px;
    background-color: #0404B4;
    color:#FFFFFF;
    position: absolute;
    transition:2s;
    left: -4em;
}
.first:hover #type {
    transition:2s;
    left:0;
}
.second:hover #type1 {
    transition:2s;
    left:0;
}
.last:hover #type2 {
    transition:2s;
    left:0;
}

CSS3将鼠标悬停在按钮上

3 个答案:

Fiddle