使用 css 进行 jquery 转换

Question

I'm relatively new to Jquery and I'm trying to make a mouseover transition so when you hover over the title the background image should be changed with some ease css transition but nothing seems to work.我对 Jquery 比较陌生，我正在尝试进行鼠标悬停转换，因此当您将鼠标悬停在标题上时，应该通过一些轻松的 css 转换来更改背景图像，但似乎没有任何效果。 I also tried Jquery fadeIn method but that also doesn't seem to work.我也尝试过 Jquery 的淡入淡出方法，但这似乎也不起作用。 What's the correct way to make the transition work?使过渡起作用的正确方法是什么？

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Roboto; background-color: #000; position: relative; overflow-x: hidden; transition: all ease 2s; } .banner { width: 100%; height: 100vh; transition: all 1s ease; } .banner-strip { display: flex; height: 100%; align-items: center; justify-content: center; transition: all .5s ease-in-out; } .strip { position: relative; width: 20%; padding: 0; display: flex; justify-content: center; align-items: center; height: 0; flex-direction: column; /*background-color: #a03131;*/ color: #fff; transition: all 1s ease; } .strip p { text-align: center; } .strip big { text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: 2px; } .strip img { line-height: 24px; font-size: 14px; text-align: center; font-style: italic; opacity: 0; visibility: hidden; transition: all ease 2s; } .banner-img img { position: absolute; width: 100%; height: 100vh; opacity: 0; transition: all .5s ease-in-out; } .banner-img { transtition: all .5s ease-in-out; } .strip:hover { height: 100%; padding: 15px 0 90px; transition: all 1s ease; } .strip:hover img { opacity: 1; visibility: visible; transition: all ease 2s !important; }

 <body> <div class="banner"> <div class="banner-img"> <img src="default.jpg" alt=""> </div> <div class="banner-strip"> <div class="strip" data-image="living.jpg"> <h2>Tattoo</h2><br> <a href="tattoo.html"> <img src="ikonka4.png" alt="" style="width: 60px; height:60px"> </a> </div> <div class="strip" data-image="bedroom.jpg"> <h2>Beauty</h2> <a href="beauty.html"> <img src="ikonka2.png" alt="" style="width: 60px; height:60px"> </a> </div> <div class="strip" data-image="dining.jpg"> <h2>Piercing</h2> <a href="piercing.html"> <img src="ikonka3.png" alt="" style="width: 60px; height:60px"> </a> </div> </div> </div> <!-- jquery cdn link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var image = $(".banner-img").find("img").attr("src"); $(".banner-img img").css("opacity", "1").fadeIn("slow"); $(".strip").mouseover(function() { var currentImage = $(this).attr("data-image"); $(this).parent().parent().find(".banner-img img").attr("src", currentImage); $(".banner-img img").fadeIn("slow"); }); $(".strip").mouseout(function() { $(".banner-img img").fadeIn("slow"); $(".banner-img img").attr("src", image).fadeIn("slow"); // SET DEFAULT IMAGE WHEN MOUSE OUT }); }); </script>

Answer 1

See example below.请参见下面的示例。 I've used the background-color property for example purposes but this can easily be substituted with background-image .我已经将background-color属性用于示例目的，但这可以很容易地替换为background-image 。

 $(function() { $(".strip").mouseover(function() { var curImg = $(this).attr("data-image"); $(".banner-img").css("background-color", curImg); }); $(".strip").mouseout(function() { $(".banner-img").css("background-color", '#000'); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Roboto; position: relative; overflow-x: hidden; } .banner { position: fixed; width: 100%; height: 100px; } .banner-img { position: fixed; width: 100%; height: 100px; background-color: #000; transition: background-color 1s ease-in-out; } .banner-strip { display: flex; align-items: center; justify-content: space-around; } .strip { position: relative; width: 20%; padding: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; } .strip img { display: block; width: 60px; height: 60px; background: #FFF; opacity: 0; transition: opacity 1s ease-in-out; } .strip:hover img { opacity: 1; }

 <div class="banner"> <div class="banner-img"> </div> <div class="banner-strip"> <div class="strip" data-image="red"> <a href="tattoo.html"> <img src="ikonka4.png" alt=""> </a> <h2>Tattoo</h2> </div> <div class="strip" data-image="blue"> <a href="beauty.html"> <img src="ikonka2.png" alt=""> </a> <h2>Beauty</h2> </div> <div class="strip" data-image="green"> <a href="piercing.html"> <img src="ikonka3.png" alt=""> </a> <h2>Piercing</h2> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

使用 css 进行 jquery 转换

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-05 00:28:20

使用 css 进行 jquery 转换

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-05 00:28:20

解决方案1
1 已采纳 2020-02-05 00:28:20