隐藏标题并使其出现在悬停状态
隐藏标题并使其出现在悬停状态
提问于 2016-06-20 09:40:49
因此，我已经有相当多的Jquery在网站上，我似乎有一个习惯，打破当前的代码时，添加比特。
但是我在标题中添加了向下箭头，我想使用CSS来隐藏整个标题减去箭头，当与光标一起悬停时，会使整个标题滑出。
我认为我拥有实现这一目标所需的大部分代码，但是我不确定我需要如何编辑它，我需要复制代码还是将它放到另一个Div中，并使用一个负值？
页面；http://outside.hobhob.uk/test
我正在看的代码；
<header id="header" role="banner">
<div class="headwidth">
<h1 class="logo">
<?php
if (!empty($data['iter_normal_site_logo'])) {
?>
<a href="<?php echo home_url(); ?>"><img src="<?php echo $data['iter_normal_site_logo']; ?>"></a>
<?php
} else {
?>
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
<?php
}
?>
</h1>
<nav id="main-nav">
<?php wp_nav_menu(array('theme_location' =>'main-nav','fallback_cb'=>'default_main_nav','container'=>'wda','depth'=>2,'menu_class'=>'sf-menu')); ?>
</nav>
</div>
<center><img src="http://outside.hobhob.uk/test/wp-content/uploads/2016/06/duas-setas-apontando-para-baixo-em-angulo_318-54897.jpg"></center>
</header>以及我所看到的CSS；
#header {
position: relative;
left: 0;
z-index: 10000;
width: 100%;
z-index:9;
padding-top: 50px;
background-color:#fff;
-moz-box-shadow: 0 0 20px #aaa;
-webkit-box-shadow: 0 0 20px #aaa;
box-shadow: 0 0 20px #aaa;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}我猜我将需要添加类似于我在下面放置的代码，但是我不确定我需要修改哪些当前代码才能使这个工作顺利进行？
#slideout {
position: fixed;
top: -250px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s；
回答 3
Stack Overflow用户
发布于 2016-06-20 09:50:31
使您的头<header id="header" role="banner" style="display:none">
并将css应用于
#header:hover{
display:block
}Stack Overflow用户
发布于 2016-06-20 09:54:06
您已经说过您的代码中有相当多的jQuery，所以一种解决方案可以是继续沿着这个轨道前进，方法是检查箭头是否被单击，如果是的话，添加一个类。见这。(尽管我知道您想使用CSS，但这仍然是应该工作的地方)
另一种替代方法是将代码从pastebin中分离出来，运行相同的JQuery代码两次，其中一个是mouseover，另一个是mouseleave，然后您只需添加和删除类，而不是切换它，类似于这 (但是没有测试)。
Stack Overflow用户
发布于 2020-08-11 18:20:46
显示:无；从dom中移除元素。
对于那些希望它存在的人，请使用：
<header id="header" role="banner" style="visibility:hidden">
悬停
#header:hover{
visibility: visible
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37919206
复制相关文章
相似问题
腾讯云开发者
