javascript - 为 javascript 定位 div 中的特定类

Question

我只想定位我当前悬停在“Flip-tile”上的类“Front”和“Back”。你如何用 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()
});

Answer 1

在 jQuery 上使用 find() 非常简单，但您可以使用 CSS 以最简单的方式实现。

Javascript:

$(".flip-tile").hover(function() {
    $(this).find(".front").hide();
    $(this).find(".back").show();
  },
  function() {
    $(this).find(".back").hide();
    $(this).find(".front").show();
  }
);

CSS 解决方案

.flip-title .front {
  display: block;
}
.flip-title .back {
  display: none;
}
.flip-title:hover .front {
  display: none;
}
.flip-title:hover .back {
  display: block;
}