通過單擊

將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

回答

相關問題