我正在制作选择面板,但其中一个方面令我困扰。这里有九个框,我希望用户能够点击框,并且当点击时,鼠标悬停的格式保持不变,并在框的边界理想地添加某种勾号或其他标记。我完全不知道如何使鼠标移开后,框的悬停字体效果保持不变。
请问是否有人知道我该如何做到这一点?
请问是否有人知道我该如何做到这一点?
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
.box_focused
中添加图片作为background-img
? - PaulfadeIn
添加到这个 jQuery 中,但是无法正确实现。我做错了什么?$('.project-option-boxes').click(function() { $(this).toggleClass.fadeIn.('box_focused'); });
- Paul