[英]Need help to hover different background images in wordpress HTML code
I want exactly like this website: https://www.petzl.com/INT/en我想要这个网站: https://www.petzl.com/INT/en
I have displayed background video, 3 texts, by hovering on them the images are changing + links to access them.我已经显示了背景视频,3 个文本,通过将鼠标悬停在它们上,图像正在更改 + 链接以访问它们。
But by hovering the text, petzl.com website have activated different images on hover, sometimes different images are appearing on hover.但是通过将文字悬停,petzl.com网站在hover上激活了不同的图像,有时在hover上会出现不同的图像。
Can I achieve the different images by css or need to have js or anything?我可以通过 css 实现不同的图像还是需要 js 或任何东西? Also need to have span/div elements to appear in one line.还需要让 span/div 元素出现在一行中。
My website link: beta.edgerope.com我的网站链接:beta.edgrope.com
Please find code below:请在下面找到代码:
Below is the code, I have added as HTML shortcode in the page and in the background video is displayed下面是代码,我在页面中添加了 HTML 短代码,并在后台显示视频
<style>.image{ height: 800px; width: 100%; display: grid; place-content:center; justify-content:middle; color: white; font-size:30px; background-color: #; background-position: center; background-size: cover; }.training{ display:inline-block; padding-top: 50px; padding-right: 1500px; padding-bottom: 50px; padding-left: 1px; }.image>div { display: inline-block; width: 100px; }.image>div img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; display: inline-block; }.image>div span { position: relative; z-index: 1; cursor: pointer; display: inline-block; }.image>div span:hover+img { opacity: 1; display: inline-block; }.div{ dipslay } </style> <div class="image"> <div class="services"> <span class="services" onclick="window.location=''">Services</span> <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div> <div class="Training"> <span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span> <img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div> <div class="shop"> <span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span> <img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div> </div>
: :
There are many ways to acomplish this, and you should be able to do this with pure css and html.有很多方法可以实现这一点,您应该能够使用纯 css 和 html 来做到这一点。
I've made an example that uses css pseudo elements in order to display the correct image when hovering the sections/links.我制作了一个使用 css 伪元素的示例,以便在悬停部分/链接时显示正确的图像。 Also changed up to use a tags instead of using onclick="window.location"
as you did.还更改为使用标签而不是像您那样使用onclick="window.location"
。
Here you can change/set the default image in the #hero selector在这里,您可以更改/设置 #hero 选择器中的默认图像
<style>
/* Styling for the default hero */
#hero {
height: 800px;
width: 100%;
display: flex;
color: black;
background-color: #000;
}
/* Wrapper for all the sections */
.hero-sections {
width: 100%;
height: 100%;
position: relative; /* Allows to change the z-index, and */
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2rem;
}
/* Container for the image */
.hero-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1; /* Allows the image to appear behind the text */
pointer-events: none; /* Prevent image to show when hovering the ::after element*/
background-image: var(
--bg-url
); /* Uses the images set by the html (css variable) */
opacity: 0; /* Hides the image when it's not active */
transition: opacity 0.5s; /* Adds a fade transition to the opacity*/
}
/* Styles when the the user hovers or has focus on the buttons/links */
.hero-image:is(:hover, :focus-within)::after {
opacity: 1; /* Change the opacity when the text is active/in hover */
}
/* Styles the buttons/links */
.hero-cta {
color: white;
text-decoration: none;
font-size: 2rem;
}
</style>
<div id="hero">
<div class="hero-sections">
<div
class="services hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="#">Services</a>
</div>
<div
class="training hero-image"
style="
--bg-url: url(https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg);
"
>
<a class="hero-cta" href="beta.edgerope.com/courses">Training</a>
</div>
<div
class="shop hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="beta.edgerope.com/shop">Shop</a>
</div>
</div>
</div>
If you would like to go more advanced here I would recommend implementing some javascript handling mouseenter
and mouseleave
.如果您想在这里更高级的 go ,我建议您实施一些 javascript 处理mouseenter
和mouseleave
。 As you said you used Wordpress you could also use the .hover() from jQuery.正如您所说,您使用了 Wordpress,您也可以使用 jQuery 中的.hover() 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.