Question

所以我一直在使用一个图像来使该区域工作，但我一直在使用一个非常宽的白色背景图像，只是给出了可以躲避的区域的幻觉。然而，随着图像变小，这会在较小的屏幕上引起问题。

http://outside.hobhob.uk

我所指的区域是带有中间箭头的顶部白色条。我希望能够移除图像（http://outside.hobhob.uk/test/img/a.jpg）并将其替换为简单的文本箭头;

<i class="fa fa-arrow-down"></i>

所以编辑以下代码;

 <header id="header" role="banner">

<center id="showHeader">
<img src="http://outside.hobhob.uk/test/img/a.jpg">
      <div class="headwidth">
            <h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
            </h1> 
          <nav id="main-nav">
        <a href="index.html">Work</a>
        <a href="about.html">About</a>
        <a href="testimonials.html">Testimonials</a>
        <a href="contact.html">Contact</a>

        </nav>  
        </div>
</center> 
    </header>

和以下CSS：

center#showHeader > img:hover + .headwidth, .headwidth:hover 
{
height: 220px;
width: 100%;
}
.headwidth {
    max-width: 1000px;
    width: 100%;
    position: relative;
    margin:0 auto;
    background-color: #ffffff;
    display: block;
    transition: .7s;
    height: 0px;
    overflow: hidden;
}
.logo {
    color:#29251F;
    font-size: 84px;
    line-height: 1.1;
    word-wrap: break-word;
    font-weight: 800;
    text-transform: uppercase;
    margin:0;
    text-align:left;
}
.logo a {

margin:0 auto;
}

我已添加：将鼠标悬停在#showHeader的末尾，但是当我添加箭头文本以替换图像时，这只会阻止它一起工作..有什么建议吗？

谢谢！

Answer 1

而不是

center#showHeader:hover > img:hover + .headwidth, .headwidth:hover {...}

尝试使用

center#showHeader:hover > .fa.fa-arrow-down:hover + .headwidth, .headwidth:hover {...}

Answer 2

怎么样

center#showHeader:hover > .headwidth {
  height: 220px;
  width: 100%;
}

而不是使用动作的图标，请使用栏本身。无需瞄准。

Answer 3

而不是你的图像只使用一个字体很棒的div

＆＃13;

.header-trigger {
  text-align: center;
  padding:1em 0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="header-trigger">
<i class="fa fa-arrow-down"></i>
</div>

＆＃13;

您的触发器是

#showHeader > .header-trigger:hover + .headwidth, .headwidth:hover

在不使用图像

3 个答案: