我试图在<li>上使用悬停，但是它不起作用

2024-05-21 • 问答

我尝试在这些<li>上使用悬停，但不知何故不起作用。因为这是我第一次看到这样的东西，所以我很困惑。

.container1 ul {
  position: absolute;
  left: 50%;
  margin-left: -180px;
  margin-top: 515px;
  display: block;
  list-style-type: none;
}

.container1 ul li {
  float: left;
  background-color: #2d2a2a;
  text-align: center;
  border: 2px solid #fab203;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: white;
  width: 25px;
  height: 20px;
  margin-left: 20px;
}

.container1 ul li:hover {
  background-color: #fab203;
  color: #2d2a2a;
  cursor: hand;
}

<div class="container1">
  <div id="album">
  </div>
  <ul>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
    <li id="5">5</li>
    <li id="6">6</li>
    <li id="7">7</li>
    <li id="8">8</li>
    <ul>
</div>

尝试此Jsfiddle link here。由于position: absolute;的定位，无序列表已从.container div的视图中消失。并且</ul>标记中也有问题。它没有正确关闭。您其余的代码工作正常。

.container1 ul{
/* position:absolute;
left:50%;
margin-left:-180px;
margin-top:515px;*/
display:block;
list-style-type: none; 
}
.container1 ul li{
float:left;
background-color:#2d2a2a;
text-align: center;
border:2px solid #fab203;
font-family: Roboto;
font-size: 16px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color:black;
width:25px;
height:20px;
margin-left:20px; 
}
.container1 ul li:hover{
background-color:#fab203;
color:#2d2a2a;
cursor:hand;
}

<div class="container1">
  <div id="album"></div>
  <ul>    
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
    <li id="5">5</li>
    <li id="6">6</li>
    <li id="7">7</li>
    <li id="8">8</li>             
  </ul>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
    .container1 ul {
        position:absolute;
        left:50%;
        margin-left:-180px;
        margin-top:515px;
        display:block;
        list-style-type: none;
    }

    .container1 ul li {
        float:left;
        background-color:#2d2a2a;
        text-align: center;
        border:2px solid #fab203;
        font-family: Roboto;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color:white;
        width:25px;
        height:20px;
        margin-left:20px; 
    }
    .container1 ul li:hover {
        background-color:#fab203;
        color:#2d2a2a;
        cursor:hand;
    }
    </style>

</head>
<body>
    <div class="container1">
        <div id="album">
        </div>
        <ul>    
            <li id="1">1</li>
            <li id="2">2</li>
            <li id="3">3</li>
            <li id="4">4</li>
            <li id="5">5</li>
            <li id="6">6</li>
            <li id="7">7</li>
            <li id="8">8</li>
        <ul>
    </div>
</body>
</html>

我试图在<li>上使用悬停，但是它不起作用

hy19851223 回答：我试图在<li>上使用悬停，但是它不起作用

大家都在问