javascript — применить CSS для конкретного изображения
Я пытаюсь применить CSS для конкретного изображения, но мой код применяет CSS для всех изображений, когда наведите только 1 изображение.
$(document).ready(function() {
$('.vidUrl').on('hover', function() {
$('.thumb-overlay').toggle();
});
});.thumb {
height: 100px;
width: 100%;
object-fit: cover;
}
.thumb-overlay {
background-image: url('http://www.denys.be/assets/images/play.png');
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-size: cover;
background-color: #00000073;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>
<div style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>Решение
Это то, что вы ищите?
$(document).ready(function() {
$('.vidUrl').hover(function() {
$(this).find('.thumb-overlay').toggle();
});
});.thumb {
height: 100px;
width: 100%;
object-fit: cover;
}
.thumb-overlay {
background-image: url('http://www.denys.be/assets/images/play.png');
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-size: cover;
background-color: #00000073;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>
<div style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>Другие решения
$(document).ready(function() {
$('.VIDEO_PARENT_CLASS').hover(function() {
$(this).find('.thumb-overlay').toggle();
});
});.thumb {
height: 100px;
width: 100%;
object-fit: cover;
}
.thumb-overlay {
background-image: url('http://www.denys.be/assets/images/play.png');
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-size: cover;
background-color: #00000073;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="VIDEO_PARENT_CLASS" style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>
<div class="VIDEO_PARENT_CLASS" style="position: relative;">
<a href="#" class="vidUrl">
<div class="thumb-overlay"></div>
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>В коде ниже, как вы написали. он будет применяться ко всем изображениям, поскольку все изображения имеют один и тот же класс ".thumb-overlay",
<script type="text/javascript">
$(document).ready(function(){
$('.vidUrl').on('hover', function(){
$('.thumb-overlay').toggle();
});
});
</script>
Вы должны изменить свой код, как показано ниже:
<script type="text/javascript">
$(document).ready(function(){
$('.vidUrl').on('hover', function(){
$(this).find('.thumb-overlay').toggle();
});
});
</script>
Как мы знаем $(this) указывает текущий объект. Таким образом, он будет применять CSS только к текущему изображению.
Зачем усложнять это с JS. Вот простое решение CSS:
.thumb {
height: 100px;
width: 100%;
object-fit: cover;
display:block;
}
.vidUrl {
position: relative;
display:block;
}
.vidUrl:before {
content:"";
background-image: url('http://www.denys.be/assets/images/play.png');
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-size: cover;
background-color: #00000073;
display: none;
}
.vidUrl:hover:before {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#" class="vidUrl">
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>
<div>
<a href="#" class="vidUrl">
<img class="thumb" src="http://lorempixel.com/300/200/">
</a>
</div>detector