在ASP，C＃和CSS中更改图像大小

Question

Why when I place the mouse on top of the image doesn't change its size?

I have this on a ASP webpage:

<asp:Image ID="ProdImage" CssClass="ImgDetail" runat="server" />

The Page_Load() loads the URL of the image like this:

ProdImage.ImageUrl = ResolveUrl("~/Images/Products/" + lblProductID.Text + ".jpg");

The CSS ImgDetail class looks like this:

.ImgDetail
{
    width: 180px;
    height: auto; 
}

.ImgDetail:hover
{
    width: 360px;
    height: auto; 
}

I just want to change the image size when the mouse is on top of the image.

Thank you.

Answer 1

First debugging step I'd take is confirm that ANY css style you're applying is working. So give .ImgDetail a 1px border red or something. If you don't see it on page load, it means your CSS file isn't being included, which is a common mistake.

Answer 2

Kind of solved the problem thanks to @Richthofen idea.

I checked the local CSS file ( http://localhost:4290/Styles/Site.css ) during debugging and it didn't have my changes on it.

Visual Studio 2010 doesn't update the CSS file when I start its debuger (F5). However, it updates the CSS file if I publish the webpage.

These are the properties of the CSS file on the Visual Studio 2010:

Build Action: Content

Copy to Output Directory: Copy always

Closing and opening VS 2010 didn't fix it. I had to reboot my PC for the CSS file to have my changes on debugging. I'm affraid I have to reboot my PC every time I need to debug the CSS file unless anyone knows how to fix this issue.

Thank you.