網站范圍內的導航鏈接在一個頁面上響應，而在另一頁面上沒有響應？

Question

我在Rails上建立了一個網站，並實現了一個網站范圍的導航欄以顯示在所有頁面上。 問題是它同時顯示在兩個頁面上，但是鏈接和懸停狀態只能在一頁上單擊？ 在渲染相同的_navigation.html.erb和nav.scss文件時，我不知道出了什么問題？

---

_navigation.html.erb

<nav>
  <div class="container nav-container">
    <div class="row">
      <div class="nav-wrapper">
        <a href="#" id="brand-logo" class="col l2"><img src="<%= asset_path('social-playground-logo.png')%>"></a>
          <ul id="nav-mobile" class=" col l10 right hide-on-med-and-down nav-desktop">
            <li><a id="link-home" href="">Home</a></li>
            <li><a id="link-toys" href="">Toys</a></li>
            <li><a id="link-pastevents" href="">Past Events</a></li>
            <li><a id="link-contacts" href="">Contacts</a></li>
            <li><a id="link-partners" href="">Partners</a></li>
          </ul>
      </div>
    </div>
  </div>

gifpage.html.erb導航欄和英雄圖像提取（正常工作）

<div class="hero-image-container group">
    <%= render 'layouts/navigation' %>
    <img id="gif-foreground-hero" src="<%= asset_path( 'GIF Foreground FInal.png') %>" class="responsive-img">

selfies.html.erb導航欄和英雄圖像提取（無法正常工作）

<div class="selfies-hero-image-container group">
    <%= render 'layouts/navigation' %>
    <img id="selfie-foreground-hero" src="<%= asset_path( 'Selfie-hero-foreground.png') %>" class="responsive-img">

兩者的_nav.scss

nav {
    height: 112px;
    line-height: 23px;
    background: rgba(10, 10, 10, 0.5);

    .nav-container {
        width: 100%;

        #brand-logo {
            transform: scale(0.8);
            margin-top: 7px;
            margin-left: 4%;
        }

        #nav-mobile {
            margin-right: 0%;
            margin-left: 0%;
            width: 79.33333%;
        }

        ul li {
            margin-top: 27px;
            margin-left: 29px;

            a {
                text-transform: uppercase;
                border: 4px solid rgba(255, 255, 255, 0);
                margin: 0px;
                padding: 14px 25px;
                display: inline-block;

                &:hover {
                    border: 4px solid rgba(255, 255, 255, 1);
                }
            }
        }
    }

}

邊框顯示在gif頁面的：hover上，但不顯示自拍照。

多謝你們

兩個英雄圖像均通過不透明度為0.5的導航欄顯示。

謝謝

---

編輯

從終端打印輸出

Started GET "/gifpage" for 59.167.19.225 at 2015-10-21 05:30:23 +0000
Cannot render console from 59.167.19.225! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#gifpage as HTML
  Rendered layouts/_navigation.html.erb (0.5ms)
  Rendered pages/gifpage.html.erb within layouts/application (62.3ms)
  Rendered layouts/_footer.html.erb (0.0ms)
Completed 200 OK in 445ms (Views: 444.1ms | ActiveRecord: 0.0ms)

與，

Started GET "/assets/_nav-87ab5873b40bcbbebe26b4faa985fc95.css?body=1" 

作為正在工作的頁面呈現的_nav.scss文件，並且

Started GET "/" for 59.167.19.225 at 2015-10-21 05:34:25 +0000
Cannot render console from 59.167.19.225! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#selfies as HTML
  Rendered layouts/_navigation.html.erb (0.9ms)
  Rendered pages/selfies.html.erb within layouts/application (8.0ms)
  Rendered layouts/_footer.html.erb (0.0ms)
Completed 200 OK in 410ms (Views: 408.8ms | ActiveRecord: 0.0ms)

與，

Started GET "/assets/_nav-87ab5873b40bcbbebe26b4faa985fc95.css?body=1"

正在呈現頁面不起作用。

我還比較了鉻檢查元素中的CSS和結構，兩者完全相同。 還是不知道！

Answer 1

看一下源代碼，看看資產管道是否渲染了相同的.css文件。 也許不同的控制器具有不同的css文件。 另外，inspect元素將向您顯示每個加載了哪些CSS。 也許您還遇到了LVHA的CSS排序（鏈接/訪問/懸停/活動）。

Answer 2

謝謝您的回答。 今天我解決了這個問題。 英雄圖像實際上位於導航列表項上，因此完全使懸停動作變得無用（即，當我將鼠標懸停在圖像而不是導航欄上時，瀏覽器將其讀取）。 將圖片的z-index更改為1，並將導航欄的z-index更改為2，可以解決此問題。 現在，當我將鼠標懸停在導航欄上時，瀏覽器會讀取它，圖像位於它的后面。 嘗試了所有內容之后，我決定從頭開始並重新構建頁面，除了這次，無論出於什么原因，我都使疊加圖像變小了一點。 這導致懸停動作僅出現在導航欄的最外面，而沒有出現在其余部分，這導致我解決了該問題。

再次感謝，賈斯汀