Target specific class in div for javascript

Question

I would like to target only the classes "Front" and "Back" of the "Flip-tile" that I am currently hovering over. How do you solve this with javascript, currently it is toggling them all at the same time.

The 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>

The Javascript:

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

Marcos Pérez Gude · Accepted Answer · 2018-07-17 11:29:19Z

2

It's so easy using find() on jQuery, but you can make it on easiest way with CSS.

Javascript:

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

CSS solution

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

answered Jul 17, 2018 at 11:29

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Programmer · Accepted Answer · 2018-07-17 11:27:34Z

1

Use $(this).find(...).

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

answered Jul 17, 2018 at 11:27

Programmer

2,1231 gold badge13 silver badges21 bronze badges

Comments

fbsanchez · Accepted Answer · 2018-07-17 13:53:20Z

1

Please take a look on https://api.jquery.com/class-selector/

I.e.

<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>

The example will apply the border style to any .myclass.otherclass items along the HTML

good luck!

edited Jul 17, 2018 at 13:53

answered Jul 17, 2018 at 11:28

fbsanchez

94 bronze badges

1 Comment

Armali Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference.

Mr. Roshan · Accepted Answer · 2018-07-17 11:31:23Z

Try this:-

$(".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>

Thanks guys! I must have been using the find() wrong when i tried a similar solution earlier!

Collectives™ on Stack Overflow

Target specific class in div for javascript

4 Answers 4

Javascript:

CSS solution

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Javascript:

CSS solution

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related