[英]Removing a <div> element while hover over another element
我在编写网站时遇到问题。
我要尝试做的是,一旦用户将鼠标悬停在“照片”按钮上,该菜单就会在左侧的.split
类中消失。
目前,它实际上不起作用(代码不在实际的网站上,我正在我自己的文本编辑器中尝试此操作,并且似乎不起作用。)
下面是我要实现的代码(我读的应该可以)
#button:hover .split{
width: 0%;
}
.left {
animation-delay: 1s;
left: 0;
background-color: #111;
}
此外,我是否可以实现animate.css对菜单进行动画处理?
下面是我当前的.split类的代码
.split {
height: 100%;
width: 40%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 0px;
}
HTML代码:
<!---Main Site Slide in--->
<div class="split left wow fadeInLeftBig animated" data-wow-duration="2s">
<div class="centered wow ">
<h1>####</h1>
<p> ### </p>
<p> #### </p>
<div class='divider'></div>
<div class='container'>
<a href="" style="text-decoration:none"><h2>Previous Projects: </h2></a>
<ul id="projects">
<li>-Selected project 1-</li>
<li>-Selected project 2-</li>
<li>-Selected project 3-</li>
</ul>
</div>
当使用:hover
,+后面的div / id应该是#button
的子#button
(在div / id内部)
您最好使用jQuery向您要实现的Div添加一个类。
$( ".photos" ).hover( function() { $( ".menu" ).addClass( "hover" ); }, function() { $( ".menu" ).removeClass( "hover" ); } );
body{ display:inline-flex; } div { width:200px; height:200px; opacity:1; -webkit-transition: all 2s; /* Safari */ -moz-transition: all 2s; /* Mozilla firefox */ -ms-transition: all 2s; /* Google chrome */ transition: all 2s; } .menu { background-color:red; position:relative; left:0px; } .photos { background-color:blue; } .hover { /*width:0px; You could do width:0; or just move the object out of view*/ opacity:0; left:-200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu">menu </div> <div class="photos">photos </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.