我有两个问题,在这种情况下我希望你能帮助我,当我尝试将此 css 应用于所有 div 元素时它没有发生:
这是 html:
<div class="thumb clickSeleccion" id="seleccionImagen">
<a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>
<div class="thumb clickSeleccion" id="seleccionImagen-1">
<a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>
这是CSS。
.clickSeleccion::after {
font-family: FontAwesome;
font-size: x-large;
content: "\f058";
position: absolute;
top: 5px;
left: 14px;
color: #ffffff;
display: inline;
margin-left: 98px;
height: 18px;
width: 18px;
text-align: center;
text-shadow: 2px 2px black;
}
只取一个元素而不是所有元素,我做错了什么,你能帮忙吗?,
- 第二个问题:当我点击这个元素时,实际的类必须改变以移除箭头
这是 de JQuery 代码:
$('.thumb').click(function() {
if($( "#"+this.id ).hasClass('clickSeleccion')){
$( "#"+this.id ).removeClass( 'clickSeleccion' ).addClass( 'clickSeleccionNO' );
}else{
$( "#"+this.id ).removeClass( 'clickSeleccionNO' ).addClass( 'clickSeleccion' );
}
});
此外,这是您可以访问此代码的链接:
链接:https://jsfiddle.net/95tngef5/
谢谢。抱歉我的英语不好,我可能没有很好地解释。
最佳答案
您需要为父元素提供一个position
,以便position: absolute
能够按您的预期工作。如果添加 .clickSeleccion { position: relative; 它是固定的; }
。
参见 positioning context on MDN了解详情。
$('.thumb').click(function() {
if ($("#" + this.id).hasClass('clickSeleccion')) {
$("#" + this.id).removeClass('clickSeleccion').addClass('clickSeleccionNO');
} else {
$("#" + this.id).removeClass('clickSeleccionNO').addClass('clickSeleccion');
}
});
.clickSeleccion {
position: relative;
}
.clickSeleccion::after {
font-family: FontAwesome;
font-size: x-large;
content: "\f058";
position: absolute;
top: 5px;
left: 14px;
color: #ffffff;
display: inline;
margin-left: 98px;
height: 18px;
width: 18px;
text-align: center;
text-shadow: 2px 2px black;
}
.thumb {
width: 150px;
height: 150px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb clickSeleccion" id="seleccionImagen">
<a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>
<div class="thumb clickSeleccion" id="seleccionImagen-1">
<a class="thumbnail " style="margin-bottom:10px;height: 145px;width: 145px"></a>
</div>
关于javascript - 在 css 中的选择器不显示在所有元素和 JQuery 错误之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46960378/