Question

所以我已经在网站上有相当多的Jquery，我似乎习惯在添加位时打破当前代码。

但是我在标题中添加了一个向下的箭头，我想使用CSS隐藏整个标题减去箭头，当用光标悬停时，会使整个标题滑出。

我认为我需要大部分代码来实现这一点，但是我不确定我需要如何编辑它，我是否需要复制代码或者只是把它放在另一个Div中，并使用减值？

我正在看的代码;

    <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

Answer 1

制作标题<header id="header" role="banner" style="display:none">

并将css应用为

#header:hover{
    display:block
}

Answer 2

你说你的代码中有相当多的jQuery，所以一个解决方案就是继续在那条轨道上，通过检查你的箭头是否被点击，如果是，则添加一个类。见this。（即使我知道你想使用CSS，它仍然是应该工作的东西）

另一种方法是将代码从该pastebin中分离出来，运行相同的JQuery代码两次，其中一个是mouseover，另一个是mouseleave，然后你只需添加和删除类而不是切换它，类似{ {3}}（未经测试）。

Answer 3

您是否可以重新安排DOM？因为如果你是，你可以应用下面的解决方案。

<强> HTML

<header id="header" role="banner">
    <center id="showHeader">
        <img src="http://outside.hobhob.uk/test/wp-content/uploads/2016/06/duas-setas-apontando-para-baixo-em-angulo_318-54897.jpg">
        <div class="headwidth">
            <h1 class="logo"><a href="http://outside.hobhob.uk/test"><img src="http://outside.hobhob.uk/test/wp-content/uploads/2016/06/logo2anismaller.gif"></a></h1>
            <nav id="main-nav">
                <ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">
                    <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-50"><a href="http://outside.hobhob.uk/test/">Work</a></li>
                    <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://outside.hobhob.uk/test/?page_id=54">About</a></li>
                    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://outside.hobhob.uk/test/?page_id=8">Workshops</a></li>
                    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://outside.hobhob.uk/test/?page_id=10">Testimonials</a></li>
                    <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://outside.hobhob.uk/test/?page_id=12">Contact</a></li>
                </ul>        
            </nav>  
        </div>
    </center>
</header>

<强> CSS

center#showHeader > img:hover + .headwidth {
    height: 182px;
}

.headwidth {
    transition: .7s;
    height: 0px;
    overflow: hidden;
}

这里的诀窍是安排DOM，以便您可以设置选择器，以便在您声明:hover状态时提供您期望的最终结果对img的问题进行规则。

运行下面的代码段以获取想法。

＆＃13;

center#showHeader > img:hover + .headwidth {
    height: 182px;
}

.headwidth {
    transition: .7s;
    height: 0px;
    overflow: hidden;
}

＆＃13;

<header id="header" role="banner">
	<center id="showHeader">
		<img src="http://outside.hobhob.uk/test/wp-content/uploads/2016/06/duas-setas-apontando-para-baixo-em-angulo_318-54897.jpg">
		<div class="headwidth">
        	<h1 class="logo"><a href="http://outside.hobhob.uk/test"><img src="http://outside.hobhob.uk/test/wp-content/uploads/2016/06/logo2anismaller.gif"></a></h1>
            <nav id="main-nav">
				<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">
					<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-50"><a href="http://outside.hobhob.uk/test/">Work</a></li>
					<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://outside.hobhob.uk/test/?page_id=54">About</a></li>
					<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://outside.hobhob.uk/test/?page_id=8">Workshops</a></li>
					<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://outside.hobhob.uk/test/?page_id=10">Testimonials</a></li>
					<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://outside.hobhob.uk/test/?page_id=12">Contact</a></li>
				</ul>        
			</nav>	
        </div>
	</center>
</header>

＆＃13;

Answer 4

display：none;从dom中删除元素。

对于那些希望加入dom的人，请使用：

<header id="header" role="banner" style="visibility:hidden">

然后悬停

#header:hover{
    visibility: visible
}

隐藏标题并在悬停时显示

4 个答案: