Question

我有一个半可见的菜单按钮，一半在屏幕外。完整按钮仅在'悬停'时才可见（我为此写了 CSS ，按钮水平移动以便完全显示）。现在这适用于桌面网站。但是如您所知，悬停在移动网站上不可用，因此将悬停转换为点击。单击使按钮完全可见，但再次单击时不会再次隐藏，因为我们尚未定义要显示和隐藏的单击事件，因为它不会干扰悬停。

那么有没有简短而有效的方法来做到这一点，所以悬停在桌面上工作，点击在手机上工作相同（显示和隐藏）功能？

您可以使用CSS或jQuery或两者兼而有之。

Answer 1

简单试试这个

1 - 使用媒体查询禁用在移动设备上的悬停

@media screen and（max-width：767px）{

按钮：悬停{只是禁用css u r using} }

2-添加此jquery - 此代码在按钮上添加和删除类

$（ '按钮'）。单击（函数（）{ $（本）.toggleClass（ 'btnClick'）;

}）;

3：现在为这个类编写相同的悬停css

.btnClick {

}

Answer 2

对于您的情况，我建议您在适合桌面的断点内设置hover function，在适合移动设备的断点内设置click function。请参阅下面的示例并根据需要进行调整。

＆＃13;

$(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");

    });
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

注意：在我的例子中;当设备宽度大于768px时hover切换高度/宽度，而当设备宽度小于768px时，click切换高度/宽度

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

2 个答案: