[英]Change Section background image on link hover
当链接被悬停时,我试图更改部分的背景图像,该图像留在鼠标上,保留默认的部分图像。 虽然我非常精通html,css和一些php,但我不擅长JS。
我在这里已经找到了多个答案,但似乎都没有用。
我努力了
并且
我的HTML结构是这样的-我第一次使用了高级自定义字段,因此我的结构与通常的结构有所不同。
<div class="projects-section">
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-a" class="project-a-class" href="link">Project A</a>
</p>
</h3>
</div>
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-b" class="project-b-class" href="link-2">Project B</a>
</p>
</h3>
</div>
</div>
等等,最多5个链接。
目前我拥有的JS是
$(document).ready(function(){
$("a.project-a-class#project-a").mouseover(function(){
$(.projects-section).css("background-image", "url('/wp-content/uploads/2019/07/project-A.jpg')");
});
});
但这是行不通的。
最后一点-我是第一次使用下划线,并且没有链接任何jquery库脚本-我是否需要添加这些才能使其正常工作? 如果是这样,在Wordpress中添加这些内容的最佳方法是什么。
谢谢
在选择器$(.projects-section)
,引号缺失。 在选择a.project-a-class#project-a
可以选择与元素id
I:E a.#project-a
,不需要类名。
const defaultImg = "https://placeimg.com/640/480/nature"; const newImg = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"; $('a#project-a') .on('mouseover', function() { $('.projects-section').css('background-image', "url(" + newImg + ")"); }) .on('mouseout', function() { $('.projects-section').css('background-image', "url(" + defaultImg + ")"); });
.projects-section { background-repeat: no-repeat; background-size: 100%; background-image:url("https://placeimg.com/640/480/nature"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="projects-section"> <div class="stacked-project-list-item"> <h3> <p> <a id="project-a" class="project-a-class" href="link">Project A</a> </p> </h3> </div> <div class="stacked-project-list-item"> <h3> <p> <a id="project-b" class="project-b-class" href="link-2">Project B</a> </p> </h3> </div> </div>
您可以使用CSS来预加载图片,并避免将鼠标悬停在链接后第一次加载图片的时间
$('a#project-a').hover(function() { $('.projects-section').toggleClass('hovered'); })
.projects-section { background-repeat: no-repeat; background-size: 100%; background-image:url("https://placeimg.com/640/480/nature"), url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"); } .projects-section.hovered { background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="projects-section"> <div class="stacked-project-list-item"> <h3> <p> <a id="project-a" class="project-a-class" href="link">Project A</a> </p> </h3> </div> <div class="stacked-project-list-item"> <h3> <p> <a id="project-b" class="project-b-class" href="link-2">Project B</a> </p> </h3> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.