|
|

楼主 |
发表于 2015-10-11 15:00:58
|
显示全部楼层
本帖最后由 itarcy 于 2015-10-11 19:48 编辑 ' O4 _" F* y/ | R# p
, \* K5 {4 b+ O) m继续请教,比如词典中这样一句代码2 \5 L2 }! S* D
, L- ]' ?5 g0 u0 q6 D" E- <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>0 _9 L/ s6 {2 l& d
- <img class="img_thumb" height="640" width="720" topic="shoes_comp.htm" thumb="laceup.jpg" src="image/shoes_comp.jpg"/></div block-g>
复制代码
8 j* Q0 z6 Z& g9 F: p4 p7 H) T+ W h' b: _: W& @
想实现悬停图片放大,而默认图片靠右
5 ]' z: ?) B5 J于是css用了, a3 `) [) E n+ c+ j
0 J5 F3 @( Z0 i# ~! i- .img_thumb
) F T" w$ y$ [6 h+ t% T - { float: right !important;2 x# |4 ?2 b5 q
- width: 160px;
& f. F# r, M& ]; n - height: auto;, s( u& e: j$ u: I# a
- padding: 0 !important;6 C& w' m- e4 h' S
- margin: 0 10px 10px 0 !important;
: B) ~& V3 y* M; K' u4 [) t - -webkit-transition: 1s;}+ N& F2 F" w$ @0 K5 [+ [6 `
- .img_thumb:hover {4 B/ o6 l7 {6 O8 }6 K
- -webkit-transform: scale(4);}
复制代码
7 L$ V, R$ U+ v/ k* d, o1 \6 m: h* ?+ Y; B
现在悬停,图片可以放大显示了7 i0 B s, F& _6 o
但是图片的位置好像不由我控制,似乎是以小图片的中心为中心?
8 B0 f; K% S# k. U- w8 h6 h' O) W1 d/ g( o0 [
不知道有没有更好的办法(尽量不用js)0 Q' J% N, ~. u# m o
9 F5 D$ T1 ?8 H4 @1 u! T* J

# |' J# A' y, ]9 j ^% o |
|