CSS3悬停在按钮上

Question

Hello can anyone help me i have this buttons and i want to make the transition off each one of them when i put my mouse over each one but seems to work only for the first button even that each button have a different class. 您好，有人可以帮我吗，我有这个按钮，当我将鼠标放在每个按钮上时，我想将它们中的每个按钮转换掉，但是即使每个按钮具有不同的类，它似乎也只能用于第一个按钮。 seems that :hover dont work for all. 似乎：hover不能为所有人工作。

CSS code: 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代码：

<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/ http://jsfiddle.net/4L3ec/

I changed the width and height to 100px instead of % , bc I couldn't even see the buttons without that. 我将宽度和高度更改为100px而不是％，但是不这样做，我什至看不到按钮。 But the fiddle I posted works great now. 但是我张贴的小提琴现在很棒。

.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

Your CSS is not valid. 您的CSS无效。 Remove the extra ; 删除多余的; after the } and it will work }之后，它将起作用

.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 answer for that. 这是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 个解决方案

解决方案1
0 2014-01-20 10:07:29

解决方案2
0 2014-01-20 10:07:31

Fiddle 小提琴

解决方案3
0 2014-01-20 10:11:43

CSS3悬停在按钮上

问题描述

3 个解决方案

解决方案1 0 2014-01-20 10:07:29

解决方案2 0 2014-01-20 10:07:31

Fiddle 小提琴

解决方案3 0 2014-01-20 10:11:43

解决方案1
0 2014-01-20 10:07:29

解决方案2
0 2014-01-20 10:07:31

解决方案3
0 2014-01-20 10:11:43