关键词:
【中文标题】仅更改悬停元素内的类【英文标题】: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
切换到hide
或hide
到show
@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 的文本?
】将鼠标悬停在按钮上时如何更改div的文本?【英文标题】:HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】:2014-08-0717:01:06【问题描述】:我有什么:连续8个编号的框。我不允许使用jQuery。我想做的事:当用户将鼠标悬停在... 查看详情
仅当孩子悬停时如何更改父母的CSS?
】仅当孩子悬停时如何更改父母的CSS?【英文标题】:Howtochangeparent\'sCSSonlywhenchildishovered?【发布时间】:2012-08-1411:31:31【问题描述】:正如标题所说..我有一个PARENT元素,它有一个CHILD元素(这里有两个div!)我想在(并且仅当... 查看详情
使用css悬停时更改img内的图片
】使用css悬停时更改img内的图片【英文标题】:Changingpictureinsideimgonhoverwithcss【发布时间】:2017-11-0521:26:27【问题描述】:我需要在悬停时更改源URL。我试过了,但是不行:这是我的CSS:.nav>li>divposition:absolute;display:block;width:... 查看详情
动态jquery。如何仅将 jquery 应用于某些元素?
...问题描述】:嘿,伙计们,我正在做一个简单的悬停颜色更改,但是我发现自己重复jquery可以这样做,以便当btn悬停时,相应的service-icon更改颜色?下文不再赘述。$(document).ready(fun 查看详情
将鼠标悬停在按钮上时仅更改部分文本
】将鼠标悬停在按钮上时仅更改部分文本【英文标题】:onlypartialtextchangeonhoveroverbutton【发布时间】:2013-09-1811:06:24【问题描述】:当鼠标悬停在按钮上时,我希望按钮中文本的字体颜色变为白色且不带下划线。目前,文本颜色... 查看详情
悬停时更改按钮内的字体图标颜色
】悬停时更改按钮内的字体图标颜色【英文标题】:Changefonticoncolorinsidebuttononhover【发布时间】:2013-03-1512:28:51【问题描述】:在我的网站(开发中)http://www.stefaanoyen.be的页脚中,文本前有3个带有箭头的按钮。箭头是图标字体... 查看详情
检查仅在鼠标悬停/输入其他元素时出现的元素
】检查仅在鼠标悬停/输入其他元素时出现的元素【英文标题】:Inspectelementthatonlyappearwhenotherelementismouseovered/entered【发布时间】:2014-09-0712:36:58【问题描述】:通常我想检查一个元素(例如工具提示),该元素仅在鼠标悬停/进... 查看详情
Javascript:div内的元素:悬停时突出显示高度[重复]
】Javascript:div内的元素:悬停时突出显示高度[重复]【英文标题】:Javascript:aelementsinsidediv:highlightheightwhenhover[duplicate]【发布时间】:2019-04-0803:25:42【问题描述】:我有一个如下所示的自定义导航栏::root--navbar-background-color:#ff1a1... 查看详情
悬停一个元素时更改所有其他元素的样式
】悬停一个元素时更改所有其他元素的样式【英文标题】:Changestyleofallotherelementswhenoneelementishovered【发布时间】:2012-09-0706:36:28【问题描述】:假设我在同一个DOM级别有一堆div。当我将鼠标悬停在一个上时,我希望所有其他人... 查看详情
CSS悬停影响其他元素 - 选择器问题
...我的示例中它没有。有什么办法可以解决吗?说明我无法更改html,需要仅是css解决方案。谢谢!演示 查看详情
悬停时更改子元素属性
】悬停时更改子元素属性【英文标题】:changingchildelementpropertyonhover【发布时间】:2019-11-2715:19:16【问题描述】:当鼠标悬停在“li”标签上时,我希望“h1”标签的颜色发生变化。我尝试按照此处提供的答案:CSS::childsettochangecol... 查看详情
如何在悬停效果上更改 div 元素内部的背景颜色?
】如何在悬停效果上更改div元素内部的背景颜色?【英文标题】:howtochangebackgroundcolorinsideelementofdivonhovereffect?【发布时间】:2018-12-0403:21:23【问题描述】:悬停“.parent”并更改其背景颜色(工作)。悬停“.child”并更改其背景... 查看详情
悬停元素时更改背景
】悬停元素时更改背景【英文标题】:Changingthebackgroundwhenhoveringanelement【发布时间】:2022-01-1802:11:08【问题描述】:我会先说我正在学习Javascript和Jquery。我试图做一个减号,当鼠标悬停在一个元素上时,它会改变下一列中的背... 查看详情
html悬停元素更改背景壁纸(代码片段)
html悬停元素更改背景壁纸(代码片段)
更改悬停时的每个元素
】更改悬停时的每个元素【英文标题】:changeeachelementonhover【发布时间】:2016-08-3009:03:27【问题描述】:我有一张图片可以在悬停时改变z-Index并播放一些声音:<divclass="portraitPanel"><imgsrc="staticImage.jpg"class="saticImg"><imgsr... 查看详情
更改所有元素的不透明度,除了悬停的元素
】更改所有元素的不透明度,除了悬停的元素【英文标题】:Changeopacityonallelementsexcepthoveredone【发布时间】:2014-12-1901:59:27【问题描述】:我想知道是否有一种方法可以降低所有“li”的不透明度(悬停时)除了我实际悬停的那... 查看详情
Java静态元素被不同的类访问
...果我有其他两个类ClassB和ClassC同时访问元素a并进行一些更改,ClassB所做的更改会不会? 查看详情