仅更改悬停元素内的类

Posted

技术标签:

【中文标题】仅更改悬停元素内的类【英文标题】:only change classes inside a hovered element 【发布时间】:2017-09-16 01:07:32 【问题描述】:

所以我正在创建一个关于用户提交食谱的页面。一些用户提交了有关该食谱的简短报价,而其他用户则没有。我想在用户将鼠标悬停在食谱图像上时显示报价(如果存在)。

现在,我正在使用这个:

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

第一个问题是它会针对所有食谱进行更改,而不仅仅是悬停在上面的食谱。第二个问题是,我不确定如何检查该食谱是否存在“滑块描述”。

这是我正在处理的fiddle。我还在学习 JQuery,所以请给我任何提示!

【问题讨论】:

你也可以只用 CSS 来做到这一点。 jsfiddle.net/bkyn40f8/6 【参考方案1】:

像这样改变你的 JS:

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

这样,您将只定位属于被悬停的元素的滑块,而不是全部定位。

【讨论】:

【参考方案2】:

这是一种检查不存在的描述以及使用更有效的悬停功能的解决方案:

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

它使用鲜为人知的$(selector, context) 表示法仅选择悬停的.recipe 元素内的文本元素。

JS Fiddle

【讨论】:

很抱歉劫持了您的答案,但我也有同样的想法,不想写另一个(多余的)答案,而是可以改进和支持现有答案。 正是因为像你这样的人@Christoph,这个社区才得以成长并帮助了这么多人。干杯 感谢您的帮助!这是对我的问题的两个部分都有帮助的唯一答案。但是,你能向我解释一下'$(".slider-description",this)[0]'吗?我有点困惑这是什么意思? if ($(".slider-description",this)[0]) 检查描述是否存在,如果存在,则$(".slider-submit",this).toggle() 将其状态从show 切换到hidehideshow @ebbBliss 当你将第二个参数传递给 jQuery 选择器时,它变成了“上下文”***.com/questions/2672034/…。这是限制范围的好方法。如果该结果的第一个索引存在,则意味着该选择至少找到一个项目。您也可以使用$("selectiong").length 来了解选择了多少元素【参考方案3】:

诀窍是使用通过悬停事件传入的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();
  );
.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>

【讨论】:

【参考方案4】:

为了阐述 Lixus,您面临的问题是,在 jQuery 中,当您进行选择时,您选择的是 DOM 中的所有内容。您想要做的是限制您的选择范围。

例如看下面的JS:

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

在 jQuery 中,通常当您输入一个传递给 jQuery 对象的函数(如“悬停”函数中的事件处理程序)时,this 上下文将是 DOM 元素而不是 jQuery 对象,因此包装 @987654324 @ with jQuery 会像平常一样为您提供 jQuery 对象。

我用这段代码更新了你的 JSFiddle。 https://jsfiddle.net/bkyn40f8/5/

【讨论】:

以上是关于仅更改悬停元素内的类的主要内容,如果未能解决你的问题,请参考以下文章

将鼠标悬停在按钮上时如何更改 div 的文本?

悬停一个元素时更改所有其他元素的样式

使用css悬停时更改img内的图片

悬停时更改按钮内的字体图标颜色

CSS悬停影响其他元素 - 选择器问题

Javascript:div内的元素:悬停时突出显示高度[重复]