站点范围的导航链接在一个页面上响应但在另一个页面上没有响应？

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 navbar 和 hero-image 提取（正常工作）

<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);
                }
            }
        }
    }

}

边框出现在 :hover 的 gif 页面上，但不是自拍。

谢谢大家

两个英雄图像都通过不透明度为 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"

正在为页面渲染不工作。

我还在 chrome 检查元素中并排比较了 css 和结构，两者完全相同。还是不知道！

Answer 1

看一下源码，看看asset pipeline是否渲染了同一个.css文件；也许不同的控制器有不同的css文件。或者，inspect 元素将向您显示为每个加载的 css。也许您还遇到了 LVHA 的 css 顺序（链接/已访问/悬停/活动）。

Answer 2

感谢您的回答。今天我解决了这个问题。英雄图像实际上位于导航列表项上，因此完全使悬停动作无用（即浏览器读取它时我将鼠标悬停在图像而不是导航栏上）。将图像的 z-index 更改为 1 并将导航栏的 z-index 更改为 2 修复了该问题。当我悬停在导航栏上时，浏览器现在会读取它，图像位于它后面的一个图层。在尝试了一切之后，我决定从头开始重新构建页面，除了这一次，无论出于何种原因，我将覆盖的图像缩小了一点。这导致悬停动作仅出现在导航栏的最外侧，而不是其余部分，从而导致我解决了问题。

再次感谢， 贾斯汀