Html 站点范围的导航链接在一个页面上有响应,但在另一个页面上没有响应?
我正在rails上构建一个站点,并实现了一个站点范围的导航栏,以显示在所有页面上。问题是它显示在两个页面上,但是链接和悬停状态只能在一个页面上单击?在渲染相同的_navigation.html.erb和nav.scss文件时,我不知道出了什么问题Html 站点范围的导航链接在一个页面上有响应,但在另一个页面上没有响应?,html,css,ruby-on-rails,sass,materialize,Html,Css,Ruby On Rails,Sass,Materialize,我正在rails上构建一个站点,并实现了一个站点范围的导航栏,以显示在所有页面上。问题是它显示在两个页面上,但是链接和悬停状态只能在一个页面上单击?在渲染相同的_navigation.html.erb和nav.scss文件时,我不知道出了什么问题 _navigation.html.erb <nav> <div class="container nav-container"> <div class="row"> <div clas
_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>
}
边框显示在:悬停以显示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)
有,
作为为正在工作的页面呈现的_nav.scss文件,
以及
有,
正在为不工作的页面呈现
我还在chrome inspect元素中并排比较了css和结构,两者完全相同。还是不知道 查看源代码,看看资产管道是否呈现相同的.css文件;可能不同的控制器有不同的css文件。或者,inspect元素将向您显示为每个元素加载的css。也许你也在点击LVHA的css排序(link/visted/hover/active)。谢谢你的回答。今天我解决了这个问题。英雄图像实际上位于导航列表项上方,因此完全使悬停操作无效(即浏览器在我悬停在图像上而不是导航栏上时读取)。将图像的z索引更改为1,将导航栏的z索引更改为2,修复了该问题。浏览器现在在我悬停在导航栏上时读取,图像位于导航栏后面的一层。在尝试了所有东西之后,我决定从头开始重新构建页面,除了这次,不管出于什么原因,我将覆盖图像缩小了一点。这导致悬停动作只出现在导航栏的最外侧,而不是其余部分,从而导致我解决了问题 再次感谢,
贾斯汀谢谢你的建议!。。但还是没有运气。有关结果,请参见对问题的编辑。这真让我烦透了!还有其他想法吗?此外,两者都在同一个pages_控制器内,并且在同一pages视图下。”pages#gifpage”和“pages#selfies”查看您的inspect元素(应该始终是第一步!)尝试在其中使用类,看看是否可以激活它。inspect元素将显示应用了哪个css以及它来自哪个文件,这可能会有所帮助!谢谢court3nay的回复,但我试着将它们并排比较,但它们的结构完全相同,css也相同?!。。好的,我不是说检查html,我是说查看它正在应用的css。请参见,在右侧栏中。如果它有相同的功能,那么它可能是愚蠢的,比如尝试重新启动浏览器。
<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 {
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);
}
}
}
}
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"
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"