Question

为什么当我将鼠标悬停在此按钮上时

enter image description here

它是否会失去其背景颜色：/

enter image description here

按钮的代码是：

 <nav class="navbar navbar-default navbar-static-top" role="navigation">

  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <%= link_to "ClassWeb", "/" ,:class=>"navbar-brand"  %>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
          <% if user_signed_in? %>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Events<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li style=""><%= link_to "My Events", current_user %></li>
            <li style=""><%= link_to "New Event", new_event_url %></li>
          </ul>
        </li>


        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Account<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><%= link_to "My page", current_user %></li>
              <li><%= link_to "Logout", destroy_user_session_path , method: :delete %></li>
            </ul>
        </li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
                    <li><%= link_to "Create Event", new_event_url, class: "btn btn-info" ,role: "button" %> </li>    
      </ul>

      <% else %>
          <li><%= link_to('Login', new_user_session_path)  %></li>
      </ul>
      <% end %>
   </div>
</nav>

应用于ul和li以及锚元素的样式如下所示 - 我已经多次扫描并且未能找到这种行为的原因（对于CSS标记道歉 - 我从Google Chrome中复制了应用的样式检查工具及其略显奇怪的格式，可能并非全部有效：

element.style {
}

.navbar-default .navbar-nav>li>a {
  color: #777;
}

@media (min-width: 768px)
.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

.nav>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

a:visited {
  color: #666;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
a, a:visited {
  color: #369ec1;
  text-decoration: none;
}
localhost/media="all"
.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
localhost/media="all"
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
localhost/media="all"
a {
  color: #000;
}
localhost/media="all"
a {
  color: #428bca;
  text-decoration: none;
}
localhost/media="all"
a {
  background: transparent;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
a, a:visited {
  color: #369ec1;
  text-decoration: none;
}
localhost/media="all"
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheeta:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}
Inherited from li
localhost/media="all"
@media only screen and (min-device-width: 481px)
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
body, h1, h2, h3, h4, li, ol, p, td, th, ul {
  line-height: 1;
  margin: 0;
  padding: 0;
}
user agent stylesheetli {
  display: list-item;
  text-align: -webkit-match-parent;
}
Inherited from ul.nav.navbar-nav.navbar-right
localhost/media="all"
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
localhost/media="all"
p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
body, h1, h2, h3, h4, li, ol, p, td, th, ul {
  line-height: 1;
  margin: 0;
  padding: 0;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
ul {
  list-style-type: none;
}
user agent stylesheetul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}
Inherited from body
localhost/media="all"
body {
  background-color: #fff;
  color: #333;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}
localhost/media="all"
body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
localhost/media="all"
@media only screen and (min-device-width: 481px)
body, h1, h2, h3, h4, li, ol, p, td, th, ul {
  line-height: 1;
  margin: 0;
  padding: 0;
}
Inherited from html
localhost/media="all"
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
localhost/media="all"
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
Pseudo ::before element
localhost/media="all"
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Pseudo ::after element
localhost/media="all"
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

非常感谢任何想法或建议

Answer 1

你需要告诉浏览器，当元素悬停时，以相同的方式设置元素的样式。

@media only screen and (min-device-width: 481px)
a, a:visited,
a:hover      // ... same styling when you :hover over it
 {
  color: #369ec1;
  text-decoration: none;
}

欢迎你。

Answer 2

好吧，我最终解决了它。

我使用了以下内容：

<ul class="navbar-right noBullets">
     <li><%= link_to "Create Event", new_event_url, class: "btn btn-info fixNavSlightIndent size11Text" ,role: "button" %> </li>

一些额外的css样式可以删除一些像bullet点和一些垂直对齐问题的东西，但是修复了它。可能是一个黑客，但我很高兴！

Answer 3

我没有看到你为此按钮声明悬停状态的任何地方。因此它将采用bootstrap的默认值。您应该在自己的css文件中声明这些覆盖并专门定位导航。

.navbar-nav>li>a:hover {
    background-color: #777;
}

当我鼠标悬停在这个bootstrap btn-info上时，它会失去背景颜色

3 个答案: