|

楼主 |
发表于 2015-10-11 15:00:58
|
显示全部楼层
本帖最后由 itarcy 于 2015-10-11 19:48 编辑 8 t$ U6 I3 W. O
) _& b3 D: v, @& A继续请教,比如词典中这样一句代码8 Q1 H1 _$ v) e: O7 {' V
2 P y3 o% d9 y0 r0 ?+ w% ` C
- <div class="block-g" level="2"><span class="pos-g" level="3"> <span class="pos" level="4" pos="n">noun</span pos> <img src="chrome/oalecd8/skin/data/symbols/small_coresym.png"/> </span pos-g>
' ?$ w2 L& @1 ^; l9 s5 y( X - <img class="img_thumb" height="640" width="720" topic="shoes_comp.htm" thumb="laceup.jpg" src="image/shoes_comp.jpg"/></div block-g>
复制代码
2 o h% |9 k4 y* [2 v* i8 g
2 a3 B# q- i+ x3 v想实现悬停图片放大,而默认图片靠右! m9 O, m5 y5 H$ T, e& l( j
于是css用了8 {2 @0 D* M) d. @, v! c5 b. H( W
2 B1 ]9 ?! ^' M/ _
- .img_thumb
q5 s3 }- f6 n( d! ^+ }$ E - { float: right !important;
2 D) J' ]3 e- ], x8 @ - width: 160px;
( g. Q2 _2 X7 f/ @& g - height: auto;
1 d! @9 p6 g( ~ - padding: 0 !important;0 V( x( r- J4 k7 l% J8 V# u" N
- margin: 0 10px 10px 0 !important;
1 o- j' \5 u/ B- B: L |4 v3 D4 q4 D& l - -webkit-transition: 1s;}
6 v, o4 X. P. L& l5 m8 L7 ~ - .img_thumb:hover {9 M4 }* j+ L- k: r0 V* U
- -webkit-transform: scale(4);}
复制代码 1 @% b# D/ @% z# [ C
6 K- S$ l9 d! B+ O# w
现在悬停,图片可以放大显示了
; t" q4 ]- H0 i2 S但是图片的位置好像不由我控制,似乎是以小图片的中心为中心?5 j$ N) e# l1 ?# v
' d8 j* K# k4 \1 L8 a
不知道有没有更好的办法(尽量不用js)
i8 n* \( |! e2 t* k2 e+ }, P
) K% I8 L6 L% g- V, p4 N
' I3 d0 h+ F, t0 n |
|