如何使用 onclick 功能更改 FontAwesome 的悬停颜色？
[英]How to change the hover color for the FontAwesome with onclick function?
问题描述
I want to change the hover color for the FontAwesome icons with onclick function, I have made FontAwesome Background Animation Effects all of it in a section, the code should work like that: when I click on any color the FontAwesome icon should change to this color .
我想使用onclick功能更改 FontAwesome 图标的悬停颜色，我已经在一个部分中制作了 FontAwesome 背景动画效果，代码应该这样工作：当我点击任何颜色时，FontAwesome 图标应该更改为这种颜色. I have trayed a lot of ways and they are not correct here is the photo for the page and the code:- [1]: https://i.stack.imgur.com/dzxAX.png [2]: https://i.stack.imgur.com/veVuf.png我有很多方法，但它们不正确，这里是页面的照片和代码：- [1]： https : //i.stack.imgur.com/dzxAX.png [2]： https：/ /i.stack.imgur.com/veVuf.png
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } #background { position: fixed; top: 0; width: 100%; height: 100vh; background: #111; display: flex; flex-direction: column; overflow: hidden; z-index: 0; } section .row { position: relative; top: -50%; width: 100%; display: flex; padding: 10px 0; white-space: nowrap; font-size: 64px; transform: rotate(-30deg); } i { color: rgba(0, 0, 0, 0.5); transition: 1s; padding: 0 5px; user-select: none; cursor: default; } i:hover { color: #9bdc28; /* #9bdc28 */ transition: 0s; text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */ } section .row div { animation: animate1 80s linear infinite; animation-delay: -80s; } section .row div:nth-child(2) { animation: animate2 80s linear infinite; animation-delay: -40s; } @keyframes animate1 { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } @keyframes animate2 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } section .row:nth-child(even) div { animation: animate3 80s linear infinite; animation-delay: -80s; } section .row:nth-child(even) div:nth-child(2) { animation: animate4 80s linear infinite; animation-delay: -40s; } @keyframes animate3 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes animate4 { 0% { transform: translateX(-200%); } 100% { transform: translateX(0); } } div { position: relative; color: white; background-color: transparent; z-index: 100; line-height: 2rem; color: #fff6; } .container { position: relative; background-color: transparent; } .container .card { position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(300px at 80% -20%); } .container .card:after { content: "Nike"; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.04); } .container .card .product-pic { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .product-pic { top: 0%; transform: translateY(0%); } .container .card .product-pic img { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 270px; } .container .card .contentBx { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx { height: 210px; } .container .card .contentBx h2 { position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; } .container .card .contentBx .product-size, .container .card .contentBx .product-colors { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s; opacity: 0; visibility: hidden; } .container .card:hover .contentBx .product-size { opacity: 1; visibility: visible; transition-delay: 0.57s; } .container .card:hover .contentBx .product-colors { opacity: 1; visibility: visible; transition-delay: 0.8s; } .container .card .contentBx .product-size h3, .container .card .contentBx .product-colors h3 { color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; } .container .card .contentBx .product-size span { width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .product-size span:hover { background: #9bdc28; } .container .card .contentBx .product-colors span { width: 14px; height: 14px; margin: 0 10px; border-radius: 50%; cursor: pointer; position: relative; } .container .card .contentBx .product-colors .active::after { content: ""; width: 22px; height: 22px; border: 2px solid #8888; position: absolute; border-radius: 50%; box-sizing: border-box; left: -4px; top: -4px; } .container .card .contentBx .product-colors span:nth-child(2) { background: #9bdc28; } .container .card .contentBx .product-colors span:nth-child(3) { background: #03a9f4; } .container .card .contentBx .product-colors span:nth-child(4) { background: #e91e63; } .container .card .contentBx a { display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; margin-top: 10px; text-decoration: none; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.5s; } .container .card:hover .contentBx a { opacity: 1; transform: translateY(0px); transition-delay: 0.88s; }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>FontAwesome Background | Animation Effects</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style2.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> </head> <body> <section id="background"> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> </section> <!-- ############################################################################################################################## --> <!-- ############################################################################################################################## --> <div class="container"> <div class="card"> <div class="product-pic"> <img src="1.png" class="pop2" /> </div> <div class="contentBx"> <h2>Nike Shoes</h2> <div class="product-size"> <h3>Size :</h3> <span>40</span> <span>41</span> <span>42</span> <span>43</span> </div> <div class="product-colors"> <h3>Color :</h3> <span class="active" data-color="#9bdc28" data-pic="url(1.png)" onclick="imgSlider('1.png');changeBgColor('#9bdc28');"></span> <span data-color="#03a9f4" data-pic="url(2.png)" onclick="imgSlider('2.png');changeBgColor('#03a9f4');"></span> <span data-color="#e91e63" data-pic="url(3.png)" onclick="imgSlider('3.png');changeBgColor('#e91e63');"></span> </div> <a href="#">Buy Now</a> </div> </div> </div> <script> const style = document.querySelector(".card").style; style.setProperty("--background", "#9bdc28"); // add active class in selected spans $(".product-colors span").click(function () { $(".product-colors span").removeClass("active"); $(this).addClass("active"); }); /* $(".act").css("background-color",$(this).attr("data-color")); $(".row div i").css("color",$(this).attr("data-color")); $(".product-pic").css("background-image",$(this).attr("data-pic"));*/ // change the shoes img function imgSlider(anything) { document.querySelector(".pop2").src = anything; }; // change background color function changeBgColor(color) { const style = document.querySelector(".card").style; style.setProperty("--background", color); }; </script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2021-06-25 17:34:53
You are using JS to attempt to set the value of a CSS variable.您正在使用 JS 尝试设置 CSS 变量的值。 However, CSS isn't a true programming language and once that CSS is like it has burnt in the value of the variable and not maintained a reference.然而，CSS 并不是一种真正的编程语言，一旦 CSS 就像它已经烧毁了变量的值而没有保持引用。 You would have to make your code so you set the value directly where the variable is used.您必须编写代码，以便直接在使用变量的地方设置值。
What might be an easier option is to set up your colours in different variables and have that apply to a different classes (eg green, blue, pink) and then set that class on the parent container - set it initially to green.更简单的选择是在不同的变量中设置颜色并将其应用于不同的类（例如绿色、蓝色、粉红色），然后在父容器上设置该类 - 最初将其设置为绿色。
Then your JS would, instead of trying to change the value of the variable, it would swap the class on the container to the new colour and then the colours would change.然后，您的 JS 不会尝试更改变量的值，而是将容器上的类交换为新颜色，然后颜色会发生变化。
Working example below.下面的工作示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#background
{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 0;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #9bdc28; /* #9bdc28 */
transition: 0s;
text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */
}
.blue i:hover {
color: #03a9f4;
text-shadow: 0 0 120px #03a9f4;
}
.pink i:hover {
color: #e91e63;
text-shadow: 0 0 120px #e91e63;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
@keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
@keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
div {
position: relative;
color: white;
background-color: transparent;
z-index: 100;
line-height: 2rem;
color: #fff6;
}
.container
{
position: relative;
background-color: transparent;
}
.container .card {
position: relative;
width: 320px;
height: 450px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background);
clip-path: circle(150px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before {
clip-path: circle(300px at 80% -20%);
}
.container .card:after {
content: "Nike";
position: absolute;
top: 30%;
left: -20%;
font-size: 12em;
font-weight: 800;
font-style: italic;
color: rgba(255, 255, 255, 0.04);
}
.container .card .product-pic {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
width: 100%;
height: 220px;
transition: 0.5s;
}
.container .card:hover .product-pic {
top: 0%;
transform: translateY(0%);
}
.container .card .product-pic img {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%) rotate(-25deg);
width: 270px;
}
.container .card .contentBx {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
transition: 1s;
z-index: 10;
}
.container .card:hover .contentBx {
height: 210px;
}
.container .card .contentBx h2 {
position: relative;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.container .card .contentBx .product-size,
.container .card .contentBx .product-colors {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 20px;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .contentBx .product-size {
opacity: 1;
visibility: visible;
transition-delay: 0.57s;
}
.container .card:hover .contentBx .product-colors {
opacity: 1;
visibility: visible;
transition-delay: 0.8s;
}
.container .card .contentBx .product-size h3,
.container .card .contentBx .product-colors h3 {
color: #fff;
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 10px;
}
.container .card .contentBx .product-size span {
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
display: inline-block;
color: #111;
background: #fff;
margin: 0 5px;
transition: 0.5s;
color: #111;
border-radius: 4px;
cursor: pointer;
}
.container .card .contentBx .product-size span:hover {
background: #9bdc28;
}
.container .card .contentBx .product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.container .card .contentBx .product-colors .active::after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
.container .card .contentBx .product-colors span:nth-child(2) {
background: #9bdc28;
}
.container .card .contentBx .product-colors span:nth-child(3) {
background: #03a9f4;
}
.container .card .contentBx .product-colors span:nth-child(4) {
background: #e91e63;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
background: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
font-weight: 600;
color: #111;
opacity: 0;
transform: translateY(50px);
transition: 0.5s;
}
.container .card:hover .contentBx a {
opacity: 1;
transform: translateY(0px);
transition-delay: 0.88s;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<section id="background">
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
<!-- ############################################################################################################################## -->
<!-- ############################################################################################################################## -->
<div class="container">
<div class="card">
<div class="product-pic">
<img src="1.png" class="pop2" />
</div>
<div class="contentBx">
<h2>Nike Shoes</h2>
<div class="product-size">
<h3>Size :</h3>
<span>40</span>
<span>41</span>
<span>42</span>
<span>43</span>
</div>
<div class="product-colors">
<h3>Color :</h3>
<span class="active" data-color="#9bdc28" data-pic="url(1.png)" onclick="imgSlider('1.png');changeBgColor('#9bdc28');"></span>
<span data-color="#03a9f4" data-pic="url(2.png)" onclick="imgSlider('2.png');changeBgColor('#03a9f4');"></span>
<span data-color="#e91e63" data-pic="url(3.png)" onclick="imgSlider('3.png');changeBgColor('#e91e63');"></span>
</div>
<a href="#">Buy Now</a>
</div>
</div>
</div>
<script>
const style = document.querySelector(".card").style;
style.setProperty("--background", "#9bdc28");
// add active class in selected spans
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
});
/* $(".act").css("background-color",$(this).attr("data-color"));
$(".row div i").css("color",$(this).attr("data-color"));
$(".product-pic").css("background-image",$(this).attr("data-pic"));*/
// change the shoes img
function imgSlider(anything) {
document.querySelector(".pop2").src = anything;
};
// change background color
function changeBgColor(color) {
let class_color = '';
if ( color == '#03a9f4' ) {
class_color = 'blue';
} else if ( color == '#e91e63' ) {
class_color = 'pink';
} else {
class_color = 'green';
}
document.querySelector("#background").className = class_color;
};
</script>
</body>
</html>
解决方案2
0 2021-06-25 20:31:25
Since you're using jQuery, you can just use the .css() method to set the color styles.由于您使用的是 jQuery，您可以只使用.css()方法来设置颜色样式。
Note that .getAttribute() is the native javascript version of jQuery .attr() .请注意， .getAttribute()是 jQuery .attr()的原生 JavaScript 版本。 It's just easier to type and more efficient in this scenario.在这种情况下，打字更容易，效率也更高。
Also I moved the scripts to the bottom of the <body> , that way they only run when the body is loaded.此外，我将脚本移到<body>的底部，这样它们只在加载正文时运行。 This prevents trying to access unloaded elements or needing to wrap everything in a $(document).ready() function.这可以防止尝试访问未加载的元素或需要将所有内容包装在$(document).ready()函数中。
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } #background { position: fixed; top: 0; width: 100%; height: 100vh; background: #111; display: flex; flex-direction: column; overflow: hidden; z-index: 0; } section .row { position: relative; top: -50%; width: 100%; display: flex; padding: 10px 0; white-space: nowrap; font-size: 64px; transform: rotate(-30deg); } i { color: rgba(0, 0, 0, 0.5); transition: 1s; padding: 0 5px; user-select: none; cursor: default; } i:hover { color: #9bdc28; /* #9bdc28 */ transition: 0s; text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */ } section .row div { animation: animate1 80s linear infinite; animation-delay: -80s; } section .row div:nth-child(2) { animation: animate2 80s linear infinite; animation-delay: -40s; } @keyframes animate1 { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } @keyframes animate2 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } section .row:nth-child(even) div { animation: animate3 80s linear infinite; animation-delay: -80s; } section .row:nth-child(even) div:nth-child(2) { animation: animate4 80s linear infinite; animation-delay: -40s; } @keyframes animate3 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes animate4 { 0% { transform: translateX(-200%); } 100% { transform: translateX(0); } } div { position: relative; color: white; background-color: transparent; z-index: 100; line-height: 2rem; color: #fff6; } .container { position: relative; background-color: transparent; } .container .card { position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(300px at 80% -20%); } .container .card:after { content: "Nike"; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.04); } .container .card .product-pic { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .product-pic { top: 0%; transform: translateY(0%); } .container .card .product-pic img { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 270px; } .container .card .contentBx { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx { height: 210px; } .container .card .contentBx h2 { position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; } .container .card .contentBx .product-size, .container .card .contentBx .product-colors { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s; opacity: 0; visibility: hidden; } .container .card:hover .contentBx .product-size { opacity: 1; visibility: visible; transition-delay: 0.57s; } .container .card:hover .contentBx .product-colors { opacity: 1; visibility: visible; transition-delay: 0.8s; } .container .card .contentBx .product-size h3, .container .card .contentBx .product-colors h3 { color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; } .container .card .contentBx .product-size span { width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .product-size span:hover { background: #9bdc28; } .container .card .contentBx .product-colors span { width: 14px; height: 14px; margin: 0 10px; border-radius: 50%; cursor: pointer; position: relative; } .container .card .contentBx .product-colors .active::after { content: ""; width: 22px; height: 22px; border: 2px solid #8888; position: absolute; border-radius: 50%; box-sizing: border-box; left: -4px; top: -4px; } .container .card .contentBx .product-colors span:nth-child(2) { background: #9bdc28; } .container .card .contentBx .product-colors span:nth-child(3) { background: #03a9f4; } .container .card .contentBx .product-colors span:nth-child(4) { background: #e91e63; } .container .card .contentBx a { display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; margin-top: 10px; text-decoration: none; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.5s; } .container .card:hover .contentBx a { opacity: 1; transform: translateY(0px); transition-delay: 0.88s; }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>FontAwesome Background | Animation Effects</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <section id="background"> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> </section> <!-- ############################################################################################################################## --> <!-- ############################################################################################################################## --> <div class="container"> <div class="card"> <div class="product-pic"> <img src="1.png" class="pop2" /> </div> <div class="contentBx"> <h2>Nike Shoes</h2> <div class="product-size"> <h3>Size :</h3> <span>40</span> <span>41</span> <span>42</span> <span>43</span> </div> <div class="product-colors"> <h3>Color :</h3> <span data-color="#9bdc28" data-pic="url(1.png)"></span> <span data-color="#03a9f4" data-pic="url(2.png)"></span> <span data-color="#e91e63" data-pic="url(3.png)"></span> </div> <a href="#">Buy Now</a> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> <script> $('.product-colors span').click(function () { $('.product-colors span').removeClass('active'); $(this).addClass('active'); $('#background i').css('color', this.getAttribute('data-color')); $('.card').css('background-color', this.getAttribute('data-color')) $('.pop2').attr('src', this.getAttribute('data-pic')) }).first().click(); //initialize </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 onclick 按钮更改 hover 颜色 - How to change hover color using onclick button
如何将此jquery函数从onclick更改为hover？ - How to change this jquery function from onclick to hover?
如何将悬停更改为onclick的角度？ - how to change hover to onclick in angular?
在 hover 上将 FontAwesome 图标更改为文本 - Change FontAwesome icon to text on hover
如何在Java脚本中更改表行颜色onclick函数 - How to change the table row color onclick function in java script
如何通过在JavaScript中调用函数来更改onclick的颜色？ - How do I change the color of a div with onclick by calling a function in JavaScript?
Javascript：如何使用 onClick 函数更改对象的可变颜色 - Javascript: How to change the variable color of a object with a onClick function
如何用圆圈和onclick()函数改变页面中圆圈的背景颜色？ - How can change the background color of a circle in the page with a circle and the onclick() function?
如何更改 hover 上的图标颜色？ - How to change icon color on hover?
如何将下拉菜单显示从悬停更改为OnClick？ - How to change dropdown show from hover to OnClick?
相关标签