左矢印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

あなたがJavaScriptのソリューションを求めていないので、これは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

@あなたを助けることが、ここではそれなしで1です。

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

答えて

関連する問題