使整个顶部酒吧悬停不用图像

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 > .headwidth { 
    height: 220px; 
    width: 100%; 
} 

，而不是使用为您的操作图标，使用栏本身。不需要瞄准。

Answer 2

而不是

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

尝试使用

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

Answer 3

而是你的形象只是用来与一个div字体真棒它

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

<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>

在您的触发器

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