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

Home » Elementor Pro容器背景鼠标感应（Hover）切换设计教程（视频）

埃克森数字营销
发布日期 5月 31, 2023
wordpress

教程资源目录

1. 视频教程（Youtube）

播放有关的视频 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="//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>