我有一个页面,如果您单击我的代码段中显示的其中一个框,则会显示一个复选标记,并且在您将鼠标移开后,其中显示的内容就好像它是事件的一样。但是,当使用 640 像素或更小的视口(viewport)查看时,框内的文本会在您选择它并选择其他内容后逐渐消失。它不是在普通桌面 View 中执行此操作,那么为什么要使用该特定媒体查询执行此操作?我根本没有对媒体查询中的 .box-focused
CSS 进行任何更改,我什至没有包含它,因为我希望一切都一样。
有人知道是什么导致了这种情况发生吗?
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.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;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
@media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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
类。
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.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;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
@media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover, .box_focused {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
关于javascript - 所选文本在 640 像素或更小的视口(viewport)中逐渐消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34908873/