这是我的 html 和我的脚本。我知道这都是非常困惑的代码，所以我为此道歉，因为我还在学习。我真的很感激在这个问题上的一些帮助。提前致谢
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
这是我的CSS
* { margin: 0; padding: 0; }
@font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
这可能是一个简单的问题，但为什么我的脚本只运行在home id 的section 而不是circle id 的section。我对两者都应用了相同的代码和类，但是当我将鼠标悬停在我的圈子上时，它并没有改变。为什么呀呀呀呀
最佳答案
您是在专门讨论 #circle 还是其他 circle 元素？如果您希望它在 #circle1、2 和 3 上工作，它不会。您已经向这些圆形元素添加了一个类，因此您需要改用类选择器。
$(".circle" ).hover( ... );
您还需要了解 CSS 的特殊性。您的 .active 选择器至少需要同样具体，如果不是更具体，才能使其生效。例如:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
这是一个非常糟糕的解决方案，这就是为什么许多人建议避免使用 ID 而只使用类。如果将这些 ID 切换为类，则无需修改 .active 选择器。例如:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
然后是 CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
您可以在此处阅读更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
另外，如果您不在悬停时执行任何逻辑，那么您就不需要 javascript。只需在您的 CSS 中使用 :hover 伪类即可。
关于javascript - jQuery 仅适用于某些 id 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31622838/