gpt4 book ai didi

html - 表格图像上的 Css 转换

转载 作者:行者123 更新时间:2023-11-28 14:00:38 24 4
gpt4 key购买 nike

我如何为我的假期列表使用 css 转换,以便当我将鼠标悬停在图像上时它需要显示大图像尺寸并且当我将鼠标移出时它需要恢复正常,我知道使用 javascript 但我想要这个用css3来完成 http://jsfiddle.net/TwRTc/

<html>
<head>
<style>
# select
{
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="15" style="font-family:Comic Sans MS; color:#0066CC;">
<tr align="left">
<TH></TH>
<th>HOLIDAYS </th>
<th>DAYS OBSERVED</th>
</tr>
<tr>
<td><img class="select" src="C:/Documents and Settings/user/Desktop/new year1.jpg" width="25" height="25" border="1">&nbsp;</td>
<td> NEW YEARS DAY </td>
<td>JANUARY 01, 2012</td>
</tr>
<tr>
<td><img class="select" src="C:/Documents and Settings/user/Desktop/bhogi.jpg" width="25" height="25" border="1"></td>
<td>BHOGI/MAKAR SANKRANTHI</td>
<td> JANUARY 13, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/republic day.jpg" width="25" height="25" border="1"></td>
<td>REPUBLIC DAY </td>
<td>JANUARY 26, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/ugadhi.jpg" width="25" height="25" border="1" ></td>
<td>UGADI </td>
<td> MARCH 23, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/good friday.jpg" width="25" height="25" border="1" ></td>
<td>GOOD FRIDAY </td>
<td>APRIL 06, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/independence day.jpg" width="25" height="25" border="1"></td>
<td>INDEPENDENCE DAY</td>
<td>AUGUST 15, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/489ramzan.gif" width="25" height="25" border="1"></td>
<td> RAMZAN</td>
<td>AUGUST 20, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/vinaka chowathi.jpg" width="25" height="15" border="1" ></td>
<td>VINAYAKA CHAVITHI</td>
<td> SEPTEMBER 19, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/dasara.jpg" width="25" height="25" border="1"></td>
<td>DASARA</td>
<td>OCTOBER 24, 2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/diwali1.jpg" width="25" height="25" border="1"></td>
<td>DIWALI</td>
<td>NOVEMBER 13,2012</td>
</tr>
<tr>
<td><img src="C:/Documents and Settings/user/Desktop/images.jpg" width="25" height="25" border="1"></td>
<td>CHRISTMAS</td>
<td>DECEMBER 25, 2012</td>
</tr>
</table>
</body>
</html>

最佳答案

您需要使用 CSS3 比例尺。我会写一个快速示例。

这是一个简单的实现:

img:hover { 
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}

请记住,您可能应该缩小默认 ImageView 以获得最佳视觉效果。

如果您的图像是 300px x 200px,那么您可以这样做:

img {
width: 200px;
}

更新了你的 fiddle :http://jsfiddle.net/TwRTc/2/

关于html - 表格图像上的 Css 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10381564/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com