如何根据不同的设备使用鼠标悬停和单击？

Question

I have a menu button which is half visible and half outside the screen. The full button is visible only when it is 'hovered' (I've written CSS for this, the button moves horizontal so it is displayed fully). Now this works on Desktop website. But as you know hover is not available on Mobile sites, so hover is converted to click. The click makes the button fully visible but it does not hide again when clicked again, because we have not defined click event to display and hide it, because it won't interfere with hover.

So is there any short and efficient way to do this, so that hover works on desktop and click works on phone for the same (display and hide) function?

You can use CSS or jQuery or both.

Answer 1

its simple try this

1 - disable hover on mobile device using media query

@media screen and (max-width:767px){

button:hover{ just disable css ur using } }

2- add this jquery - this code adding and removing a class on the button click

$('button').click(function(){ $(this).toggleClass('btnClick');

});

3: now write the same hover css for this class

.btnClick{

}

Answer 2

For your case, I suggest you set a hover function within a break-point that suits desktops and a click function within a break-point that suits mobile device. See my example below and adjust as needed.

 $(document).ready(function() { // When document is ready check window width, then choose hover/click if ($(window).width() > 768) { $("div").hover(function() { $(this).toggleClass("increase"); }); } else { $("div").click(function() { $(this).toggleClass("increase"); }); } }); 

 div { width: 50px; height: 15px; line-height: 45px; margin: 0 auto; background: red; color: white; border-radius: 5px; text-align: center; cursor: pointer; overflow: hidden; transition: all 1s; } div.increase { width: 150px; height: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> I am the Button</div> 

Note: in my example; hover toggles the height/width when device width is wider than 768px, while a click toggles the height/width when device width is less than 768px