Question

这是我的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部分运行，而不是在id的圈子中运行。我将相同的代码和类应用于两者，但是当我将鼠标悬停在我的圈子上时，它并没有改变。 whyyyyy

Answer 1

您是在具体谈论#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伪类。

Answer 2

您的活跃课程应该像这样

。主动{ background-color：red！important;

}

#circle的背景颜色已经应用于Circle对象
因此，给予一个重要的声明为样式表作者提供了一种方法，使CSS值比自然具有更大的权重。

Answer 3

问题似乎是你没有覆盖背景图片。因此，如果背景图形没有任何透明部分，则根本无法看到背景颜色

.active{
    background-color: red !important;
    background-image: none !important;
}

jQuery仅适用于某些id标记

3 个答案: