從css懸停到javascript中的onclick事件

-1

我使用css在某些元素上創建懸停方法，以便在用戶將鼠標懸停在它們上方時更改其外觀。然後我改變了主意，現在我想使用javascript的onclick函數進行相同的更改。所以我希望過濾條在點擊時展開，而不是在將鼠標懸停在它上面時展開。這裏是CSS代碼：從css懸停到javascript中的onclick事件

#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; 
}

來源

2017-03-03 MSiric

能否請您也分享HTML和JavaScript？目前還不清楚你想要做什麼。 – caisah

沒有JavaScript。當鼠標懸停在其上時，我共享了一部分CSS代碼，用於更改過濾器欄（將其展開）。但是現在我想讓過濾器欄展開，當我點擊它而不是懸停在它上面時。我認爲最好的方法是JavaScript嗎？ – MSiric

將點擊事件綁定到添加所需類的欄，這將使您可以在點擊時更改CSS。 –

-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; 
}

只要確保你添加的onClick功能的HTML一樣，我把在頂部。

來源

2017-03-03 18:29:14

您可以使用這些功能切換使用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*/

，那麼你需要的款式的「點擊」類使用CSS

來源

2017-03-03 19:42:52 Tuaafooo

從css懸停到javascript中的onclick事件

回答

相關問題