o1 {

Question

我正在使用带有2个选项的选项元素在CSS中创建一个网站，当您将鼠标悬停在其上时，该选项的颜色应该会发生变化，例如here。但当我切换到另一侧时，悬停会改变整个条形的颜色，就像它显示here一样。我需要它才能在鼠标悬停的一半上改变颜色。

这是我的css和html：

#header {
  background-color: #77AD78;
  color: white;
  width: 100%;
  text-align: center;
  font-family: Roboto, Roboto, Roboto;
  margin-left: auto;
  margin-right: auto;
}

#options {
  background-color: #77AD78;
  width: 100%;
  color: white;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: #77AD78;
}

#o1 {
  float: left width: 50%;
  text-align: center;
}

#o2 {
  float: right;
  width: 50%;
  text-align: center;
  color: #6F8F72;
}

#o1:hover {
  background-color: #8FD694;
  color: #77AD78;
}

<html>

<head>
  <title>Stylish</title>
  <link rel="stylesheet" type="text/css" href="stylehistoric.css" />
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp2b5o90_5K1NbK5qZj86P6Hn61xhUFII&libraries=places&callback=initMap" async defer></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 11.019343,
          lng: -74.850179
        },
        zoom: 16
      });
      var id1 = document.getElementById('textt');
      var autocomplete = new google.maps.places.Autocomplete(id1);
    }
  </script>
</head>

<body>
  <div id="header">
    <h1>abcr design</h1>
    <div id="options">
      <div id="o2">Histórico</div>
      <div id="o1"><a href="styletest.php">Tracking</a></div>
    </div>

另一页的css是相同的，只有＃o2.hover而不是＃o1.hover的

更改

Answer 1

您应该更改def square_odd_terms(tp1): for num in tp1: if num%2 != 0: return (num**2) else: return (num) return tuple(num)上的background-color: #77AD78;而不是hover

color

#header {
  background-color: #77AD78;
  color: white;
  width: 100%;
  text-align: center;
  font-family: Roboto, Roboto, Roboto;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  margin:0;
}

#options {
  background-color: #77AD78;
  width: 100%;
  color: white;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: none;
  color: white;
  display: block;
  background-color: #8FD694;
}

a:visited {
  color: white;
}

a:hover {
  background-color: #77AD78;
}

#o1 {
  float: left;
  width: 50%;
  text-align: center;
}

#o2 {
  float: right;
  width: 50%;
  text-align: center;
  color: #6F8F72;
}

Answer 2

浮动和宽度之间缺少分号：

o1 {

Friendship::where( [
                    [ 'uid1' ,'=', $uid],
                ])->orWhere( [
                    [ 'uid2', '=', $uid]
                ])->all();

float: left width: 50%;

#header {
  background-color: #77AD78;
  color: white;
  width: 100%;
  text-align: center;
  font-family: Roboto, Roboto, Roboto;
  margin-left: auto;
  margin-right: auto;
}

#options {
  background-color: #77AD78;
  width: 100%;
  color: white;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: #77AD78;
}

#o1 {
  float: left;
  width: 50%;
  text-align: center;
}

#o2 {
  float: right;
  width: 50%;
  text-align: center;
  color: #6F8F72;
}

#o1:hover {
  background-color: #8FD694;
  color: #77AD78;
}

Answer 3

仅尝试此css

#header {
  background-color: #77AD78;
  color: white;
  width: 100%;
  text-align: center;
  font-family: Roboto, Roboto, Roboto;
  margin-left: auto;
  margin-right: auto;
}

#options {
  background-color: #77AD78;
  width: 100%;
  color: white;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: #77AD78;
}

#o1 {
  float: left;
  width: 50%;
  text-align: center;
}

#o2 {
  float: right;
  width: 50%;
  text-align: center;
  color: #6F8F72;
}

#o1:hover {
  background-color: #8FD694;
  color: #77AD78;
} 
#o2:hover {
  background-color: #8FD694;
  color: #77AD78;
}

Answer 4

#header {
  background-color: #77AD78;
  color: white;
  width: 100%;
  text-align: center;
  font-family: Roboto, Roboto, Roboto;
  margin-left: auto;
  margin-right: auto;
}

#options {
  background-color: #77AD78;
  width: 100%;
  color: white;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: #77AD78;
}

#o1 {
  width: 50%;
  text-align: center;
}

#o1:hover {
  background-color: #8FD694;
  color: #77AD78;
}

#o2 {
  float: right;
  width: 50%;
  text-align: center;
  color: #6F8F72;
}

#o2:hover {
  background-color: #8FD694;
  color: #77AD78;
}

<html>

<head>
  <title>Stylish</title>
  <link rel="stylesheet" type="text/css" href="stylehistoric.css" />
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp2b5o90_5K1NbK5qZj86P6Hn61xhUFII&libraries=places&callback=initMap" async defer></script>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {
          lat: 11.019343,
          lng: -74.850179
        },
        zoom: 16
      });
      var id1 = document.getElementById('textt');
      var autocomplete = new google.maps.places.Autocomplete(id1);
    }
  </script>
</head>

<body>
  <div id="header">
    <h1>abcr design</h1>
    <div id="options">
      <div id="o2">Histórico</div>
      <div id="o1"><a href="styletest.php">Tracking</a></div>
    </div>

将鼠标悬停在浮动元素上时会出现CSS问题

4 个答案:

o1 {