使用CSS和HTML在標題中顯示懸停和元素對齊元素

我有一個位於頁面頂部的全寬粘性標題。在此標題上，徽標位於左側，中間是導航菜單，右側是搜索圖標。使用CSS和HTML在標題中顯示懸停和元素對齊元素

我正在尋找使用鼠標懸停在搜索圖標上時出現的彈出窗口。只要鼠標指針位於彈出框內或搜索圖標上，我就希望彈出框保持可見狀態。

我還想在我的小搜索圖標的最右側顯示彈出窗口的最右側。

HTML代碼：

<header id="header"> 
    <div class="container_header clearfix"> 

      <div class="menu-row-top clearfix"> 

      <div class="header-logo"> 
       <a href="http://www.mywebsite.com"> 
        <img src="/small_logo.png" alt="logo" height="44" width="210"> 
       </a> 
      </div> 

      <!-- NAVIGATION --> 
      <nav class="primary"> 
        <?php wp_nav_menu(array(
        'container'  => 'ul', 
        'menu_class'  => 'sf-menu', 
        'menu_id'   => 'topnav', 
        'depth'   => 0, 
        'theme_location' => 'header_menu' 
        )); 
        ?> 
       </nav><!--.primary--> 


      <div class="header-search"> 
       <a class="search"><img src="/search_icon.png" alt="search_icon" height="28" width="28"></a> 
        <div class="header-search-form"> 
         This is the search form 
        </div> 
      </div> 

    </div> 
</header>

CSS代碼：

.container_header{ 
background: #0459b5; 
} 

.menu-row-top { 
    margin: 0 auto; 
    max-width: 960px; 
    height:44px; 
} 

.header-logo{ 
float: left; 
display:block; 
} 

nav.primary { 
    position: relative; 
    z-index: 2; 
    display: block; 
    float: left; 
    margin-left: 20px; 
} 

.header-search{ 
float:right; 
display:block; 
margin-top:7px; 
margin-left: 12px; 
} 

.header-search-form{ 
    display:none; 
    position: fixed; 
    top: 44px; 
    background: white; 
    width: 400px; 
    border-bottom: solid 4px #036dda; 
    height: 80px; 
} 


a.search:hover + .header-search-form{ 
display: block; 
}

與上面的代碼，我用搜索表單彈出窗口時，我的鼠標懸停搜索圖標，但不會出現如果我懸停搜索表單，則不會保持可見狀態。我想要得到正確的CSS標記。

此外，彈出窗口從搜索圖標的左側一直對齊到屏幕的右側。我嘗試了一下位置（左邊，右邊），但它似乎將窗口一直髮送到我的屏幕的兩個非960像素寬度的極端。無論我如何調整瀏覽器窗口的大小（即從右側的搜索圖標右側對齊），我也希望窗口始終保持在同一位置。

來源

2014-11-09 LaGuille

我設法彈出窗口的工作我在你的CSS http://jsfiddle.net/ce1j6k7k/3/

.header-search-form { 
z-index:1000; 
display:none; 
position: fixed; 
top: 44px; 
background: green; 
width: 400px; 
border-bottom: solid 4px #036dda; 
height: 80px; 
} 
.header-search:hover .header-search-form { 
display: block; 
}

我給了一個更高的z-index值，以便它總是會在頂部

來源

2014-11-09 07:31:07 Akshay

出於某種原因，它會修改這些僅當我第一次懸停圖標時才起作用，然後，當鼠標懸停在彈出框上時，它將停止正常工作。我必須重新加載頁面，使其再次工作... – LaGuille 2014-11-09 07:37:47

@LaGuille似乎對我來說工作正常 – Akshay 2014-11-09 07:40:09

而且我也很難與對齊問題... – LaGuille 2014-11-09 07:40:31

使用CSS和HTML在標題中顯示懸停和元素對齊元素

回答

相關問題