左箭頭html和css

-3

我需要此功能的代碼。默認情況下，它應該像右箭頭 Right arrow ，當我點擊它應該是向下箭頭。 down arrow 左箭頭html和css

感謝，拉姆

2017-05-24 pbrc1995

你不能這樣做，只用HTML和CSS。由於這涉及點擊，您還需要js/jQuery。 –

您可以使用JavaScript做。如果您不知道如何使用JavaScript，請參閱下面的代碼。

<html> 
<head> 
<title>Title</title> 
<script type="text/javascript> 
function myFunction(){ 
document.getElementById('img').src = "down.jpg"; 
} 
</script> 

<body> 
<img src="right.jpg" id="img" onclick="myFunction();"/> 
</body> 
</html>

享受：d

正如你可以看到，我們在使用它的id的js獲取元素並改變其src屬性並將其設置爲你的另一幅圖像。您可以根據自己的需要更改點擊的事件。您可以使用ondblclick通過雙擊觸發該功能。^-^

來源

2017-05-24 06:37:23 KevalPithadiya

這可能會幫助你@ pbrc1995 :)

function myFunction(x) { 
 
    x.classList.toggle("change"); 
 
}

.container { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.bar1, .bar2, .bar3 { 
 
    width: 35px; 
 
    height: 5px; 
 
    background-color: #333; 
 
    margin: 6px 0; 
 
    transition: 0.4s; 
 
} 
 

 
.change .bar1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
 
    transform: rotate(-45deg) translate(-9px, 6px) ; 
 
} 
 

 
.change .bar2 {opacity: 0;} 
 

 
.change .bar3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
 
    transform: rotate(45deg) translate(-8px, -8px) ; 
 
}

<p>Click on the Menu Icon to transform it to "X":</p> 
 
<div class="container" onclick="myFunction(this)"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
</div>

來源

2017-05-24 06:51:36 acmsohail

既然你不是在問一個JavaScript解決方案，這裏是一個沒有它。

div.arrow { 
 
    width:33px; height:30px; 
 
    background:url('https://i.stack.imgur.com/yMatp.png'); 
 
} 
 

 
div.arrow:active{ 
 
    width:51px; height:26px; 
 
    background:url('https://i.stack.imgur.com/M3Bew.png'); 
 
}

<div class="arrow"></div>

來源

2017-05-24 06:53:17

左箭頭html和css

回答

相關問題