css - 通过 css 悬停时的 ASP.Net 图像

Question

我有一个 css 和 asp.net，但是当鼠标悬停时，它无法正常工作。但是我的 css 在 html 上完美运行。我怎样才能使用 css 使这个 onHover 变化。

这是我的asp.net

<asp:Image ID="Image1" runat="server" CssClass="body read-more image-frame,h2,p "/>

这是我的CSS

.body {  
font-family:Arial, Helvetica, sans-serif; 
-webkit-font-smoothing: antialiased; 
background: #222;
}

.image-frame { 
position:relative;
width:190px; 
height:230px; 
margin:10px;
cursor:pointer;
overflow:hidden; 
text-align:center; 
float:left;
background:#fff;
}

.image-frame .img { 
margin-top:10px;
height:125px; 
background: #eee;
position: relative;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}

.image-frame h2 {
font-size: 14px;              
height:30px;
}

.image-frame p { 
font-size:22px;
font-weight:700; 
margin:0;
}

.image-frame p.only { 
position:absolute;
left:40px; 
font-size: 10px; 
bottom:20px;
}

.image-frame .image-hover { 
width:190px;
height:250px;
background:rgba(255,255,255, 0.9); 
position:absolute;  
bottom:-250px;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
-khtml-opacity: 0; 
color:#ffffff;
transition:bottom 0.4s , opacity 0.4s; 
-webkit-transition:bottom 0.4s , opacity .2s; 
}

.image-frame:hover .image-hover{
bottom:0px; 
opacity:1; 
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
filter: alpha(opacity=90); 
-moz-opacity: 1; 
-khtml-opacity:1;
transition:bottom 0.4s , opacity 0.4s;
-webkit-transition:bottom 0.4s linear, opacity 0.4s;
}

.read-more {
color: #FFF; 
text-decoration: none;
background:#8D171A;
padding: 10px 20px;
margin:100px auto 0px auto;
transition: background 0.4s; 
-webkit-transition: background 0.4s ; 
text-transform: uppercase; 
display:block; 
width:100px;
}

.read-more:hover { 
background: #333; 
transition: background 0.4s;
-webkit-transition: background 0.4s; 
}

我想要的输出是这样的: http://i.imgur.com/jg9Vmxz.jpg

Answer 1

我的第一个猜测是您的 .NET 标记有问题:

<asp:Image ID="Image1" runat="server" CssClass="body read-more image-    frame,h2,p "/>

image- 和 frame 之间有不需要的(？)空格，逗号无效。试试这个:

<asp:Image ID="Image1" runat="server" CssClass="body read-more image-frame "/>