Only Change Classes Inside A Hovered Element

So I'm creating a page about user-submitted recipes. Some users have submitted a short quote about the recipe, others have not. I wanted to have the quote, if it exists, to display

Solution 1:

Change your JS like this:

$(".recipe").hover(function(){
    $(this).find(".slider-submit").hide();
    $(this).find(".slider-description").show();
},
function(){
    $(this).find(".slider-submit").show();
    $(this).find(".slider-description").hide();
});

This way you will only target the sliders that belong to the element that is being hovered over, instead of target them all.

Solution 2:

Here's one solution with checking for non existent descriptions as well as using a more efficient hover function:

$(".recipe").hover(function(){
   if ($(".slider-description",this)[0]){
      $(".slider-submit",this).toggle();
   }
   $(".slider-description",this).toggle();
});

It uses the lesser known $(selector, context) notation to only select the text elements within the hovered .recipe element.

JS Fiddle

Solution 3:

The trick is to use this that gets passed in with the hover event to find the elements inside.

$(".recipe").hover(function() {
    $(this).find(".slider-submit").hide();
    $(this).find(".slider-description").show();
  },
  function() {
    $(this).find(".slider-submit").show();
    $(this).find(".slider-description").hide();
  });

.recipe {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  overflow-y: hidden;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  text-align: center
}

.slider-text {
  position: absolute;
  bottom: 0;
  width: 200px;
  padding: 0% 3% 3% 3%;
  color: white;
  white-space: normal;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 100;
  margin-left: 3px;
}

.slider-text:not(.asparagus-slider) {
  padding: 6% 3% 3% 3%;
}

.slider-text>h3 {
  font-size: 15px;
}

#asparagus {
  font-size: 14px;
  padding: 0% 3% 3% 3%;
}

.slider-info {
  padding-bottom: 30px;
}

.slider-description {
  display: none;
}

#chili-img,
#asparagus-img,
#macCheese-img,
#noBakePie-img {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>Bear Creek Chili</h3>
        <p class="slider-submit">
          Submitted by: Dottie User
        </p>
      </div>
      <img id="chili-img" src="http://mystateoffitness.com/wp-content/uploads/2016/07/big-game-chili.jpg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text asparagus-slider">
        <h3 id="asparagus">Beer Battered Asparagus with Lemon Herb Dipping Sauce</h3>
        <p class="slider-submit">
          Submitted by: Chris User
        </p>
        <p class="slider-description">
          <em>"This is the only way that I can enjoy asparagus"</em>
        </p>
      </div>
      <img id="asparagus-img" src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2007/9/10/0/IP0211_Beer_Battered_Asparagus.jpg.rend.hgtvcom.616.462.jpeg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>Mac n' Cheese</h3>
        <p class="slider-submit">
          Submitted by: Annette User
        </p>
      </div>
      <img id="macCheese-img" src="https://images-gmi-pmc.edge-generalmills.com/c41ffe09-8520-4d29-9b4d-c1d63da3fae6.jpg">
    </div>
    <div class="col-md-3 recipe">
      <div class="slider-text">
        <h3>No Bake Peanut Butter Pie</h3>
        <p class="slider-submit">
          Submitted by: Shari User
        </p>
        <p class="slider-description">
          <em>"This recipe makes enough for two pies - one for your guests and one just for you!"</em>
        </p>
      </div>
      <img id="noBakePie-img" src="http://cdn2.tmbi.com/TOH/Images/Photos/37/300x300/exps17834_CCT1227369D54B.jpg">
    </div>
  </div>
</div>

Solution 4:

To expound on Lixus, the issue that you're facing is that in jQuery, when you do a selection, you are selecting EVERYTHING in the DOM. What you wanted to do is limit your selection scope.

For example, look at the following JS:

 $(".slider-submit").hide();  // Global selection
 $(this).find(".slider-submit").hide();  // Limit search to only descendants of "this"

In jQuery, generally when you enter into a function passed into a jQuery object (like the event handler in the "hover" function) the this context will be the DOM element and not the jQuery object, so wrapping this with jQuery will give you the jQuery object like normal.

I updated your JSFiddle with this code. https://jsfiddle.net/bkyn40f8/5/