On Mouseout object should not hide if it is clicked

[matif]

Hi,
I have a div visibility hidden button on hover, it shows a drop down arrow. on mouseout the arrow disappears. Its fine here
but If I click on this drop down arrow and drop down list shows, i want this list to be visible even i remove my mouse from the parent div.

but instead, when i remove mouse from the parent div this list disappear and again shows the drop down opened list on mouseover

Can anyone help? i can send a screen shot or code if you ask me to do so

[Beverleyh]

Unfortunately, we can’t troubleshoot effectively from a description, but you can provide a demo of your code (showing the problematic behaviour) in CodePen.

It’s most likely however, that you’ll need JavaScript to do what you want. I’m guessing that the dropdown visibility is triggered via hover: in CSS? so, the styles are inevitably going to revert back as soon as you move your mouse cursor away.

It sounds like you need a JavaScript toggle to add and remove a class when the button is clicked. Here’s an old class toggle demo that might help http://fofwebdesign.co.uk/template/_testing/misc/change-class.htm

[Author]

Posts