使整個頂部酒吧懸停不用圖像

所以我一直在使用一個圖像，使該地區的工作，但我一直在使用一個非常寬的圖像與白色背景只是給這個地區的可能性幻覺。但是，隨着圖像變小，這會在較小的屏幕上產生問題。使整個頂部酒吧懸停不用圖像

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結束，但這只是停止它的工作都在一起，當我在添加箭頭文本替換圖像。。有什麼建議麼？

謝謝！

來源

2016-07-15 Daniel Hobbs

'已被棄用，不應再使用。 –

我可以用什麼來代替？有什麼建議麼？ –

現在它工作正常嗎？ – iyyappan

怎麼樣

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

，而不是使用爲您的操作圖標，使用欄本身。不需要瞄準。

來源

2016-07-15 10:02:48 AlexG

令人驚歎！這已經完成了，我甚至沒有想過只是刪除東西！天才！非常感謝！我學得越多，結果就越讓我的代碼變得更簡單！巨大的幫助和一個巨大的開眼界我:)謝謝加載！ –

哈哈，不客氣！ :) – AlexG

而不是

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

嘗試使用

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

來源

2016-07-15 09:38:20 vignesh

嘿，這可以讓箭頭與懸停一起工作，但現在所有的空白都不反應，關於如何讓整個區域作出反應的任何想法？謝謝！ –

給出寬度：100％;到箭頭元素（標籤） – iyyappan

+0

我該怎麼做？我試過添加; 但它對周邊地區沒有任何影響。 –

0

而是你的形象只是用來與一個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

來源

2016-07-15 09:45:56

+0

嘿，感謝您的幫助。我已經改變了這些位，但似乎已經失去了懸停在一起..我應該把整個標題區域在該div內？目前我有你提供的分區代碼，然後是其後面的帶寬分區等 –

+0

如果圖像觸發的行動，那麼只需替換* *圖像應該工作 –

使整個頂部酒吧懸停不用圖像

回答

相關問題