切换悬停和单击无法正常工作

toggle on hover and click not working properly

本文关键字：常工作 工作 悬停 单击      更新时间：2024-06-18

我已经创建了这个小切换，因为我从javascript开始，但它并没有像我希望的那样工作。悬停和单击时（主要针对ipad），棕色框应该会出现和消失。

现在它可以悬停，但不能点击ipad，它只出现一次，就这样。

我觉得它也和我的共享图标混淆了。

感谢您的帮助。

jsfiddle

function toggleDisplay (toBlock, toNone) {
    document.getElementById(toBlock).style.display = 'block';
    document.getElementById(toNone).style.display = 'none';
}
#toggle_hero
{
	float:left;
}
.leftHalf
{
    display: block;
    height: 100%;
    width: 50%;
    float: left;
    position: absolute;
    z-index: 2;
}
.leftHalf div
{
    display:none;
}
.leftHalf:hover
{
}
.leftHalf:hover div
{
    display:block;
    width: 100%;
    height: 23%;
    overflow: auto;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 70px;
    right: 0;
    background: white;
    color: #fff;
    background-color:rgba(207,167,80,0.7);
    padding:10px;
    font-size: 0.8em;
    font-weight: 200;
}
.leftHalf:hover div h3
{
    font-weight: 500;
    float:left;
}
.leftHalf:hover div span{
    float:right;
    text-align: center;
    padding-bottom:5px;
    color:black;
}
hover (on a pc) or click me (on ipad)    
<div id="toggle_hero" onclick="toggleDisplay('comment', 'toggle_hero')">
        <div class="leftHalf clearfix" id="comment">
           <div>
               <span>
                <a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>&nbsp;
                   
                <a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
              </span>
              <h3>this text should appear both on hover and click (for ipad)</h3> 
            </div>
        </div>
    </div>

您只需创建一个事件侦听器，即可捕获变量中的当前切换状态

var toggle = false;
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
    if (toggle === false) {
        this.getElementsByTagName('p')[0].style.display = 'none';
        toggle = true;
    } else {
        this.getElementsByTagName('p')[0].style.display = 'initial';
        toggle = false;
    }
});

http://jsfiddle.net/scott88/bLkdt6mc/

您可以为"mouseover"添加另一个侦听器。

您的HTML结构有点奇怪。要悬停/单击的文本实际上在单击事件的目标区域之外。由于绝对的定位，它恰好在本地对我有效，但如果iPad浏览器的行为不同，我也不会感到惊讶。

我建议为要点击/悬停的内容定义一个明确的目标，在点击/悬停时应用一个类，并在CSS中处理其余内容。我把我设想的东西放在一起。您可以删除mouseenter和mouseleave事件，以便在计算机上模拟它如何处理触摸事件。我不确定你到底希望它如何表现，但希望这足以让你开始。

function setHover(isHover) {
	var element = document.getElementById("toggle_hero");
	if (isHover)
		element.className = "hovered";
	else
		element.className = "";
}
function toggleHover() {
	var element = document.getElementById("toggle_hero");
	setHover(element.className === "");
}
#toggle_hero {
	float:left;
}
#comment {
	display:none;
	width: 100%;
	height: 23%;
	overflow: auto;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	background: white;
	color: #fff;
	background-color:rgba(207,167,80,0.7);
	padding:10px;
	font-size: 0.8em;
	font-weight: 200;
}
.hovered #comment {
	display: block;
}
<div id="toggle_hero" onclick="toggleHover()" onmouseenter="setHover(true);" onmouseleave="setHover(false);">
	hover (on a pc) or click me (on ipad)  
	<div id="comment">
		<div>
		   <span>
			<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>&nbsp;
			<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
		  </span>
		  <h3>this text should appear both on hover and click (for ipad)</h3> 
		</div>
	</div>
</div>

相关文章：