我创建了一个用户可以投票图像的Web应用程序。当用户将鼠标悬停在“gridItem”上时，我将隐藏覆盖层并显示另一个覆盖层，其上有两个按钮。为了使它在触摸设备上工作，我还添加了：focus伪类。
这在任何桌面浏览器中都能很好地工作，并且可以轻松实现。我现在面临的问题是，当我尝试点击“悬停”叠加层上的按钮时，此叠加层会在我获得点击事件之前消失。
这是一些HTML代码和我的css类：
<div class="gridItem">
<img class="..." src="..." alt="">
<div class="likeLabelOverlay">
small content
</div>
<div class="likeButtonOverlay ghost-center">
<div>
<h3>large content</span>
<button type="button" id="..." class="btn btn-default">button 1</button>
<button type="button" id="..." class="btn btn-default">button 2</button>
</div>
</div>
</div>
我在gridItem上处理悬停：
.gridItem:hover .likeButtonOverlay, .gridItem:focus .likeButtonOverlay {
display: block;
}
.gridItem:hover .likeLabelOverlay, .gridItem:focus .likeLabelOverlay {
display: none;
}
答案 0 :(得分：0)
手机上没有悬停。你可以做的是在触摸时用jquery绑定一些事件。
喜欢这个：
$(document).ready(function() {
$('.gridItem').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
<强> CSS
.gridItem:hover, .gridItem.hover_effect {
rule:properties;
}
答案 1 :(得分：0)
移动设备支持:active。使用:hover :active。这是demo。
.gridItem:hover .likeButtonOverlay, .gridItem:active .likeButtonOverlay {
display: block;
}
.gridItem:hover .likeLabelOverlay, .gridItem:active .likeLabelOverlay {
display: none;
}<div class="gridItem">
<img class="..." src="..." alt="">
<div class="likeLabelOverlay">
small content
</div>
<div class="likeButtonOverlay ghost-center">
<div>
<h3>large content</span>
<button type="button" id="..." class="btn btn-default">button 1</button>
<button type="button" id="..." class="btn btn-default">button 2</button>
</div>
</div>
</div>
答案 2 :(得分：0)
我们必须为与我合作的代理机构的客户解决此问题。
我还会在这里描述代码，以防小提琴发生任何事情，它永远存在。
小提琴
https://jsfiddle.net/GrafikMatthew/7nx53twL/
图书馆
我正在使用2.2 jQuery库，但我很确定如果需要可以使用早期版本。
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
CSS
这只是一个准系统演示文稿，因此这些是此方法所需的最小样式。您可以根据页面设计修改这些内容。
<style type="text/css">
.nav-wrapper ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-wrapper > ul::after
{
content: "";
clear: both;
display: block;
float: none;
height: 0;
}
.nav-wrapper > ul > li
{
display: block;
float: left;
padding: 10px;
position: relative;
}
.subnav-wrapper
{
display: none;
background: #000;
position: absolute;
top: 100%;
left: 0;
}
.subnav-wrapper > ul > li {
padding: 10px;
}
.subnav-wrapper > ul > li > a
{
white-space: nowrap;
color: #fff;
}
.nav-wrapper > ul > li:hover
, .nav-wrapper > ul > li.hover
{
background: #000;
}
.nav-wrapper > ul > li:hover > a
, .nav-wrapper > ul > li.hover > a
{
color: #fff;
}
.nav-wrapper > ul > li:hover > .subnav-wrapper
, .nav-wrapper > ul > li.hover > .subnav-wrapper
{
display: block;
}
</style>
HTML
我正在为这个菜单结构使用相当直接的标记，但是除了列表和锚之外的所有内容，目标都是通过类名完成的，因此可以将元素换成适合您项目的元素。
<div class="nav-wrapper">
<ul class="nav">
<li><a href="#link-a">Link A</a>
<div class="subnav-wrapper">
<ul class="subnav">
<li><a href="#link-a-a">Sublink A A</a></li>
<li><a href="#link-a-b">Sublink A B</a></li>
<li><a href="#link-a-c">Sublink A C</a></li>
</ul>
</div>
</li>
<li><a href="#link-b">Link B</a></li>
<li><a href="#link-c">Link C</a>
<div class="subnav-wrapper">
<ul class="subnav">
<li><a href="#link-c-a">Sublink C A</a></li>
<li><a href="#link-c-b">Sublink C B</a></li>
<li><a href="#link-c-c">Sublink C C</a></li>
</ul>
</div>
</li>
<li><a href="#link-d">Link D</a></li>
</ul>
</div>
<hr />
<div class="dummy">
<p>Dummy content...</p>
</div>
JS
我正在使用标准的匿名机箱，并通过jQuery公开$。
<script type="text/javascript">
(function($){
function MH_ResetAll() {
$( '.nav-wrapper .hover' ).removeClass( 'hover' );
}
function MH_Init() {
// >
// > Environment
// >
$( document ).on( 'touchstart', function( e ) {
MH_ResetAll();
} );
// >
// > Primary Navigation
// >
$( '.nav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {
// Cancel default event behaviors...
e.preventDefault();
e.stopPropagation();
// Hook the important elements for this event...
var ThisA = $( this );
var ThisParentLI = $( ThisA.parents( 'li' ).get( 0 ) );
// Is there a subnav-wrapper in the parent list item?
if( ThisParentLI.find( '.subnav-wrapper').length ) {
// Is the parent list item already hovered?
if( ThisParentLI.hasClass( 'hover' ) ) {
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
} else {
// Reset all other hover states...
MH_ResetAll();
// Add the hover class to the parent list item...
ThisParentLI.addClass( 'hover' );
}
} else {
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
}
} );
// >
// > Secondary Navigation
// >
$( '.subnav-wrapper' ).on( 'touchstart', function( e ) {
// Prevent secondary navigation from bubbling up...
e.stopPropagation();
} );
$( '.subnav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {
// Cancel default event behaviors...
e.preventDefault();
e.stopPropagation();
// Hook the important elements for this event...
var ThisA = $( this );
// Handle the event as a link click...
window.location.href = ThisA.attr( 'href' );
} );
}
$( document ).on( 'ready', function() {
MH_Init();
} );
} )( jQuery );
</script>