CSS翻转按钮问题

时间：2017-09-22 15:25:20

标签： html css button drop-down-menu hover

我正在尝试使白色“联系我”文本保持活动状态或白色，同时用户滚动按钮然后将鼠标悬停在链接列表中。我觉得我只是在盘旋一个非常简单的答案。当您翻转下拉菜单时，您会注意到它从红色变为白色然后再变为红色。翻转下面的菜单时如何保持白色？

我仍然在清理代码并调整按钮，但我删除了所有不必要的内容。

JSFiddle：https://jsfiddle.net/hvj675mo/6/ 

<style>body {
  background-color: #000000;
}

.new-contact-us {
  background-color: transparent;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  border: 2px solid #ce1818;
  display: inline-block;
  cursor: pointer;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  padding: 14px 14px;
  text-decoration: none;
  line-height: 10px;
  color: #ce1818;
}

.new-contact-us:hover {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.new-contact-us:active {
  position: relative;
  /*top:1px;*/
  color: #ffffff;
  background-color: #ce1818;
}


/**** START BOX DIV ****/

.new-contact-us-box {
  position: relative;
  display: block;
}

.new-contact-us-box:active {
  color: #ffffff;
}


/**** START DROPDOWN ****/

.new-contact-us-box ul li {
  padding-bottom: 10px;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ababaa;
  text-transform: none;
}

.new-contact-us-box ul li a {
  color: #ce1818;
  text-decoration: none;
}

.new-contact-us-box ul li a:hover {
  text-decoration: underline;
}

.new-contact-us-box ul li a:active {
  text-decoration: underline;
}

.container-contact {
  float: left;
  width: 296px;
  margin 0px;
}

.new-contact-us-box ul {
  padding-left: 0px;
  list-style: none;
  margin: 0px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover {
  position: relative;
  display: inline-block;
  background-color: #ce1818;
  color: #ffffff;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  left: auto !important;
  right: 0 !important;
}

</style>
<div style="width: 700px; padding-left: 600px">
  <!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->

  <div class="new-contact-us-box dropdown">
    <a href="#" class="new-contact-us">CONTACT US</a>

    <div class="dropdown-content">

      <ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">

        <li>
          <div class="container-contact">
            <ul>
              <li>Hello</li>
              <li><img src="####" style="margin-right: 10px;"><a href="#" target="_blank">#########</a></li>
              <li style="margin-left: 28px; margin-top: -9px"> <a href="#" target="_blank">BlAH BLAH</a></li>
            </ul>
          </div>
        </li>

      </ul>

    </div>

  </div>

</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->

2 个答案:

答案 0 :(得分：3)

hover和.new-contact-us-box都有.new-contact-us。所以你可以改变这个：

.new-contact-us:hover {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

到此：

.new-contact-us-box:hover .new-contact-us {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

见下面的演示：

body {
  background-color: #000000;
}

.new-contact-us {
  background-color: transparent;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  border: 2px solid #ce1818;
  display: inline-block;
  cursor: pointer;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  padding: 14px 14px;
  text-decoration: none;
  line-height: 10px;
  color: #ce1818;
}

.new-contact-us-box:hover .new-contact-us {
  background-color: #ce1818;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.new-contact-us:active {
  position: relative;
  /*top:1px;*/
  color: #ffffff;
  background-color: #ce1818;
}


/**** START BOX DIV ****/

.new-contact-us-box {
  position: relative;
  display: block;
}

.new-contact-us-box:active {
  color: #ffffff;
}


/**** START DROPDOWN ****/

.new-contact-us-box ul li {
  padding-bottom: 10px;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ababaa;
  text-transform: none;
}

.new-contact-us-box ul li a {
  color: #ce1818;
  text-decoration: none;
}

.new-contact-us-box ul li a:hover {
  text-decoration: underline;
}

.new-contact-us-box ul li a:active {
  text-decoration: underline;
}

.container-contact {
  float: left;
  width: 296px;
  margin 0px;
}

.new-contact-us-box ul {
  padding-left: 0px;
  list-style: none;
  margin: 0px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover {
  position: relative;
  display: inline-block;
  background-color: #ce1818;
  color: #ffffff;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  left: auto !important;
  right: 0 !important;
}

</style>
<div style="width: 700px; padding-left: 600px">
  <!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING--->
  <div class="new-contact-us-box dropdown">
    <a href="#" class="new-contact-us">CONTACT US</a>
    <div class="dropdown-content">
      <ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
        <li>
          <div class="container-contact">
            <ul>
              <li>Hello</li>
              <li><img src="####" style="margin-right: 10px;"><a href="#" target="_blank">#########</a></li>
              <li style="margin-left: 28px; margin-top: -9px"> <a href="#" target="_blank">BlAH BLAH</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->

答案 1 :(得分：1)

更改CSS 

.new-contact-us:hover {
    background-color:#ce1818;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    color: #ffffff;
}

到此：

.dropdown:hover .new-contact-us {
    background-color:#ce1818;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    color: #ffffff;
}
相关问题
最新问题