[英]Target specific class in div for javascript
我只想定位当前悬停的“翻转式”的“前”和“后”类。 您如何使用javascript解决此问题,目前它是同时切换它们的。
HTML:
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
Javascript:
$(".flip-tile").hover(function() {
$(".front").hide()
$(".back").show()},
function() {
$(".back").hide()
$(".front").show()
});
在jQuery上使用find()
是如此简单,但是您可以使用CSS以最简单的方式实现它。
$(".flip-tile").hover(function() {
$(this).find(".front").hide();
$(this).find(".back").show();
},
function() {
$(this).find(".back").hide();
$(this).find(".front").show();
}
);
.flip-title .front {
display: block;
}
.flip-title .back {
display: none;
}
.flip-title:hover .front {
display: none;
}
.flip-title:hover .back {
display: block;
}
使用$(this).find(...)
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
请看一下https://api.jquery.com/class-selector/
即
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
该示例将边框样式应用于HTML上的任何.myclass.otherclass项目
祝好运!
尝试这个:-
$(".flip-tile").hover(function() { $(this).find(".front").hide() $(this).find(".back").show()}, function() { $(this).find(".back").hide() $(this).find(".front").show() });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip-tile"> <div class="front"> <div class="project-tile primary-color col-md-4 col-xs-12"> <img class="tile-img" src="../static/img/first.png"> <div class="tile-text"> <h4><span class="light">Front side</span></h4> </div> </div> </div> <div class="back" style="display:none;"> <div class="project-tile secondary-color col-md-4 col-xs-12"> <div class="tile-text"> <h4><span class="light">Back side</span></h4> </div> </div> </div> </div> <div class="flip-tile"> <div class="front"> <div class="project-tile primary-color col-md-4 col-xs-12"> <img class="tile-img" src="../static/img/first.png"> <div class="tile-text"> <h4><span class="light">Front side</span></h4> </div> </div> </div> <div class="back" style="display:none;"> <div class="project-tile secondary-color col-md-4 col-xs-12"> <div class="tile-text"> <h4><span class="light">Backside</span></h4> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.