【问题标题】:Div moves on hover with scaleDiv 在悬停时按比例移动
【发布时间】:2011-09-15 19:41:57
【问题描述】:

看这里:

http://jsfiddle.net/MLaVb/1/

当您将鼠标悬停在缩略图上时,通过位置:绝对在缩略图上(位置:相对)定位的标题会移动。在 :hover 上定义的唯一内容是

transform:scale(1.2);

任何想法如何解决?

我需要两个单独的 div 作为标题,1 个用于背景,1 个用于文本(不能使用 RGBA)。

请注意,图像周围的边距需要保留。在本例中,为 5px,但也可以为 20px 或更多。

谢谢, 卫斯理

【问题讨论】:

    标签: css html positioning transform scale


    【解决方案1】:

    这是工作的html +css

    <a href="https://picasaweb.google.com/Darryl.Wilson1/MyPictures02#5157833312913845474"       style="padding:0px;margin:0px" class="thumbnail zoom">
    
    <div class="container" style="padding:0px;margin:0px">
         <img src="http://lh6.ggpht.com/-iMWjZc44UuA/R5ROEhrn7OI/AAAAAAAAAV4/3l2mDuaeQ4Q/s160-c/Acura%252520Advanced%252520Sports%252520Car%252520Concept%25252002.jpg" style="width: 160px;">
    
        <div class="title_grid inside" style="width: 160px;margin:0px;position:absolute;left:0px ">
        </div>
        <div class="title_grid inside_text" style="width: 160px;">
         <span>&nbsp;Acura Advanced</span>
        </div>
    </div>
    </a>
    

    【讨论】:

    • 谢谢,但我希望每张图片有 5px 的边距,你可以去掉所有边距。它应该与 5px、20px 的边距一起工作,这都是我投入的值。
    • 为什么不将上面发布的代码包装在 div 标签中并在它们上面加上边距?
    • 如果没有更简单的解决方案,我想必须这样做!
    • 哦,是的,你需要设置 display:inline-block 为包装 div 使其在缩放期间尽可能小
    猜你喜欢
    • 1970-01-01
    • 2014-07-20
    • 2013-10-12
    • 1970-01-01
    • 2015-02-09
    • 1970-01-01
    • 2017-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多