Question

好的，所以我必须显示营业时间。我使用段落作为开放时间文本。当我在开放时间盘旋它不会消失，它需要显示的文本不是中心。我哪里出错？

HTML：

<div class="heurehover">
    <p>Open hours <span class="showmeonhover">
                         blablablablablablbala </span> 
    </p>
</div>

CSS：

.showmeonhover {
    display: none;
}
.heurehover:hover .showmeonhover {
    display: inline-block;
    text-align:center;
}

http://jsfiddle.net/rknopy93/

Answer 1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#showmeonhover { 
    display: none; 
}


</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#open').hover(function(){
        $(this).hide();
        $('#showmeonhover').show();
    });
});
</script>

</head>

<body>
<div class="heurehover">
                         <p id="open">Open hours  </p><span id="showmeonhover">
                         blablablablablablbala </span>
</div>
</body>
</html>

试试这个

Answer 2

我认为这就是你想要的：

.showmeonhover { 
    display: none; 
}

.heurehover:hover .showmeonhover {
    display: inline;
}

.heurehover:hover .open {
    display: none;
}

.heurehover:hover {
    text-align: center;
}

<div class="heurehover">
    <span class="open">
        Open hours
    </span>
    <span class="showmeonhover">
        blablablablablablbala
     </span>
</div>

Answer 3

就这样做

div.heurehover span.showmeonhover:hover  {
    display:block;
    text-align:center;
}

仅在悬停在其他文本上时显示文本

3 个答案: