Only change classes inside the hovering element
So I am creating a page about user submitted recipes. Some users submitted a short quote about the recipe, others didn't. I would like to have a quote, if it exists, to display when the user hovers over the recipe image.
I am currently using this:
$(".recipe").hover(function(){
$(".slider-submit").hide();
$(".slider-description").show();
},
function(){
$(".slider-submit").show();
$(".slider-description").hide();
});
The first problem is that it changes for all recipes, not just hangs. The second problem is that I'm not sure how to check if a "slider description" exists for this recipe or not.
Here is a fiddle of what I am working on. I am still learning JQuery, so give me some advice please!
source to share
Here's one solution, checking for nonexistent descriptions, and also using a more efficient hover function:
$(".recipe").hover(function(){
if ($(".slider-description",this)[0]){
$(".slider-submit",this).toggle();
}
$(".slider-description",this).toggle();
});
It uses lesser known $(selector, context)
notation only for selecting text elements within a hovered element .recipe
.
source to share
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 behind the vortex, instead of targeting them all.
source to share
The trick is to use the this
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>
source to share
To talk about Lixus, the problem you are having is that in jQuery, when you make a selection, you select EVERYTHING in the DOM. What you wanted to do was constrain the selection.
For example, take a 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 a function passed into a jQuery object (like an event handler in a "hover" function), the context this
will be a DOM element, not a jQuery object, so wrapping this
with jQuery will give you a jQuery object as usual.
I have updated your JSFiddle with this code. https://jsfiddle.net/bkyn40f8/5/
source to share