0
Ich mache eine Website in CSS mit einem Optionen-Element, das 2 Optionen hat, und die Farbe der Option sollte sich ändern, wenn Sie den Mauszeiger darüber bewegen, wie here. Aber wenn ich auf die andere Seite wechsle ändert der Hover die Farbe des gesamten Balkens wie es here anzeigt. Ich brauche es, um die Farbe zu ändern, nur auf der Hälfte, über der die Maus schwebt.CSS-Probleme beim Schweben über ein Float-Element
Hier ist meine CSS und 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>Die CSS für die andere Seite ist identisch einzige Änderung # ist o2.hover statt # o1.hover
Das war es. Vielen Dank! –