CSSのホバーからjavascriptのonclickイベントへ

Question

私はいくつかの要素にホバーメソッドを作成して、ユーザーがホバーオーバーしたときにその外観を変えるようにしました。それから、私は気が変わったので、同じ変更を加えるためにjavascriptのonclick関数を使いたいと思っています。 フィルタバーをクリックして拡大し、その上にマウスを置いてはいけません。ここ は、CSSコードです：

#filterbar:hover{ 
width: 290px; 
} 

#filterbar:hover + #artwork{ 
height: 3000px; 
width: 960px; 
background-color: #3a3b3a; 
margin: 0px auto; 
position: absolute; 
left: 290px; 
} 

#filterbar:hover + #artwork > .box{ 
width: 250px; 
height: 250px; 
margin-right: 52.5px; 
} 

#filterbar:hover + #artwork > #box3{ 
margin-right: 52.5px; 
} 

#filterbar:hover + #artwork > #box1{ 
margin-left: 52.5px; 
} 

Answer 1

<button onclick="myFunction()">Click me</button> 


function myfunction(){ 
    document.getElementById("yourID").setAttribute("style"," 
             height: 3000px; 
             width: 960px; 
             background-color: #3a3b3a; 
             margin: 0px auto; 
             position: absolute; 
             left: 290px; 
} 

ちょうど私が一番上に置くようにあなたは、HTMLでのonClick関数を追加してください。

Answer 2

あなたはこれらの機能を使用してjQueryを使ってクリックでクラスを切り替えることができます。

$("#element").click(function() { }); 
/* by using hasClass() addClass() and removeClass() you can try to toggle a class for the element and then style it with css*/ 

を、その後、あなたはまた、HTMLとJavaScriptを共有してもらえ