通过单击

将div的背景颜色从左边框更改为右边我想要通过单击按钮从左边框开始更改div的颜色。
通过单击

我举了一个例子，做了类似的事情，但只是当鼠标悬停在div上。
JsFiddle。
我喜欢这样的事情。

这是我的代码：

HTML：

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> 
</head> 
<body> 
    <div class="abc" id="d" style="width:150px; height: 150px;"> 
    <button onClick="setNew()">Click me</button> 
    <button onClick="goBack()">Click me</button> 
    </div> 
</body> 
<html>

的JavaScript：

function setNew() { 
    var id = "dv"; 
    document.getElementById(id).style.backgroundColor = "lightblue"; 
} 
function setNew() { 
    var id = "d"; 
    document.getElementById(id).style.backgroundColor = "white"; 
}

CSS：

.abc { 
    background-color:white; 
    transition: background-color 800ms linear; 
}

来源

2016-02-26 Mark90

例子使用线性渐变，你不会，它会从颜色渐变为颜色。 - 专注于链接的测试http://jsfiddle.net/75Umu/1866/ –

你的意思是，只有当你点击时颜色过渡才会改变，而不是当你悬停时？ –

谢谢@Gyryrillus的回复！无论如何，我想通过js函数来做到这一点，因为我想在其他情况下调用函数，而不仅仅是当用户单击按钮时。我希望每次都从左到右开始换色，不论是过渡是白蓝还是蓝白。你能再帮我一次吗？ – Mark90

这不，当你点击，而不是当你徘徊

ul { 
 
    list-style-type: none; 
 
} 
 

 
ul li a { 
 
    text-decoration: none; 
 
} 
 

 
.skillsDouble { 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
.skillsDouble li a { 
 
    width: 100px; 
 
    padding: 11px 16px; 
 
    text-align: center; 
 
    float: left; 
 
    background: #ff3232; 
 
    background: linear-gradient(to left, red 50%, blue 50%); 
 
    background-size: 200% 100%; 
 
    background-position: right bottom; 
 
    margin-left: 10px; 
 
    transition: all 2s ease; 
 
} 
 

 
.skillsDouble li a:focus { 
 
    background-position: left bottom; 
 
} 
 

 
.skillsDouble li a { 
 
    color: white; 
 
}

<div class="skillsDouble"> 
 
    <ul> 
 
    <li><a href="#">Automation</a> 
 
    </li> 
 
    <li><a href="#">TDD</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--End skills double-->

来源

2016-02-26 16:38:44

jQuery的方式ü可以做一个事件单击当u点击，在您的DIV谁拥有你的CSS加个班

$(document).ready(function(){ 
 
\t $("li").click(function(){ 
 
     $("li").removeClass("active"); 
 
    \t $(this).addClass("active"); 
 
    }) 
 
})

ul { 
 
    list-style-type:none; 
 
} 
 
ul li a { 
 
    text-decoration:none; 
 
} 
 
.skillsDouble { 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 
.skillsDouble li { 
 
    width:100px; 
 
    padding: 11px 16px; 
 
    text-align:center; 
 
    float:left; 
 
    background: #ff3232; 
 
    /* Old browsers */ 
 
    background: linear-gradient(to right, blue 50%, red 50%); 
 
    background-size: 200% 100%; 
 
    background-position:right bottom; 
 
    margin-left:10px; 
 
    transition:all 2s ease; 
 
} 
 
.skillsDouble .active{ 
 
    background-position:left bottom; 
 
} 
 
.skillsDouble li a { 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="skillsDouble"> 
 
    <ul> 
 
    <li><a href="#">Automation</a> 
 
    </li> 
 
    <li><a href="#">TDD</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<!--End skills double-->

来源

2016-02-26 16:45:53

回答

相关问题