Elementor Pro容器背景鼠标感应(Hover)切换设计教程(视频)

elementor容器hover切换背景设计案例

文章目录

1. 视频教程(Youtube)

Play Video about elementor容器hover切换背景设计案例

2. 教程代码

--文字Hover效果代码/CSS

				
					selector{
    --text-position: -500px;
    --heading-position: -50px;
    --button-position: 70px;
}
selector, selector .single-card p, selector .single-card a, selector .single-card h2{
    transition: .5s all ease-in-out;
}
selector .single-card p, selector .single-card a{
    position: relative;
    bottom: var(--text-position);
}
selector .single-card a{
    transition: 0.5s all linear;
    position: relative;
    top: 500px;
}
selector .single-card:hover p, selector .single-card:hover a{
    bottom: 0px;
}
selector .single-card:hover a{
    top: var(--button-position);
}
selector .single-card h2{
    position: relative;
    bottom: var(--heading-position);
}
selector .single-card:hover h2{
    bottom: 0px;
}
				
			

--背景Hover效果代码/JS代码

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
//Image One
var ImgOne = "url(https://theglass.net/wp-content/uploads/2023/05/R-scaled.jpg)";
//Image Two
var ImgTwo = "url(https://theglass.net/wp-content/uploads/2023/05/P-1580126-B1D91B3BO.jpg)";
    $(document).ready(function(){
        
    $('#card-one').hover(function(){
        $('#main-parent').css("background-image", ImgOne)
    }, function(){
        $('#main-parent').css("background-image", "")
    });
    
    $('#card-two').hover(function(){
        $('#main-parent').css("background-image", ImgTwo)
    }, function(){
        $('#main-parent').css("background-image", "")
    })
    
    
    })
</script>
				
			

3. 获取ElementorPro

4. YouTube教程视频观看科学上网工具

5.设计模板免费获取

Leave a Comment

Your email address will not be published. Required fields are marked *

联系我们

联系电话:13665461054 或者表单留言

谷歌快速排名秘诀

免费获取《谷歌快速排名秘诀-4.0》

---这些都是埃克森数字营销多年SEO总结而来的实践经验汇聚而成

请放心,我们只会偶尔发几封有干货的邮件,你的信息我们会严格保密。

注:订阅后请一定,一定,一定到您的邮箱中确认您的订阅,这样才能收到我们的《谷歌快速排名秘诀》!!!