如何解决通过“悬停”功能进行迭代
对于一个客户,我正在一个网站上工作。她想要一个可以在其中找到公司价格和价格的区域。我只想创建一个类,当该人将鼠标悬停在“这个”类上时,该按钮将出现。
这对我来说很复杂。此时,当用户将鼠标悬停在“ prices1”部分上时,两个按钮都将出现在两个部分中。
我已经尝试给“ .arrow”属性赋予“ this”,但是,从逻辑上讲,“ a”部分将向上移动,而不是“ .arrow”类。
不胜感激!
$(".prices1 a").hover(function () {
$('.arrow').css({
"opacity": "100%","transform": "translate(0%,-80%)",});
$('.button-tarieven p').css({
"transform": "translateY(-50%)","opacity": "0%",});
},function () {
$('.arrow').css({
"transform": "translate(0%,0%)",});
$('.button-tarieven p').css({
"transform": "translateY(0%)","opacity": "100%",});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Conversation</h2>
<p>Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<p>Donec sed odio dui. Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
<div class="prices1">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg>
<h2>Intake</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Morbi leo risus,porta ac consectetur ac,vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</p>
<div class="buttons-price">
<a href="#">
<p>Make appointment!</p>
</a>
</div>
<a href="">
<div class="arrow">
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
解决方法
您应该尝试使用hide()
和show()
函数而不是CSS。
@TKoL建议使用$(this)引用当前目标
赞:
$(".prices1 .trigger").hover(function() {
$(this).find('.arrow').show();
},function() {
$(this).find('.arrow').hide();
});
//This is in order to hide the button at the page load ;)
$('.arrow').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prices1">
<h2>Conversation</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>
<div class="prices1">
<h2>Intake</h2>
<div class="trigger">
<a href="#">
<p>Make appointment!</p>
</a>
<a href="" class="arrow">
<div>
<img src="img/arrow.png" alt="Arrow">
</div>
</a>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。