在应用悬停时遇到了简单的问题,我的意思是我想要悬停在方框上,方框的不透明度应该为0.3,而盒子内的按钮应该有不透明度(1)。
所以我试图完成这个任务但是没有成功。
当悬停在方框上时,方框的不透明度应该为0.3,而盒子内的按钮应该具有不透明度(1)。
body {
margin: .5em;
padding: 0;
height: 100%;
background-color: #E8E8E8;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
direction: rtl;
}
#cell_1 {
margin: 0 -3px 1em 0;
padding: 8px;
float: right;
width: 61%;
height: 100px;
border-radius: 0px 20px 0px 0px;
position: relative;
background-color: #9BBB59;
height: 100px;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
#cell_1:hover {
opacity: 0.3;
}
#cell_1:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<form id="form1" runat="server">
<!--//end #postHeader//-->
<div id="centerColumn">
<!--//end #navbar//-->
<div id="header" style="text-align:right">
<asp:Image ID="Image1" runat="server" ImageUrl="~/APP_EOM/EO/Hed2.png" Width="100%" />
</div>
<!--//end #headern//-->
<br />
<br />
<br />
<br />
<br />
<br />
<h2> </h2>
<h2> </h2>
<h2> heading 2:</h2>
<p style="font-size:15px; line-height:1.5em; font-weight:normal">
testiest test teset teset
</p>
<!-- Start Cell_1 -->
<div id="cell_1" dir="rtl">
<h2>????? ???????</h2>
<p style="font-size:14px; font-weight:normal"> ABCDEFG .</p>
<p> </p>
<div class="middle">
<asp:Button ID="Button1" runat="server" CssClass="text" Text="teeeest" style="background-color: #297c1c;border:none;color:white;padding:7px 32px;text-align:right;text-decoration:none;cursor:pointer;" />
</div>
</div>
<!--//end #cell_1//-->
</div>
</form>