javascript - 悬停时更改对象的大小

Question

我正在尝试使用 CSS 为我的对象添加悬停效果，但 html 似乎太复杂而无法更改。因此，我向您请教一些建议。

:hover 效果将改变对象的大小和颜色。

我标记了 jquery 和 javascript 以防用那种语言更容易实现效果。

PHP

<div class="holder forsideikonholder">
    <div class="container">
        <div class="row">
            <ul class="prosess">
                <a href="#">
                    <div class="col-md-4 foto">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.png">
                            </object>
                            <p class="thin">Fotografering</p>
                        </li>
                    </div>
                </a>

                <a href="#">
                    <div class="col-md-4 video">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.png">
                            </object>
                            <p class="thin">Videoproduksjon</p>
                        </li>
                    </div>
                </a>

                <a href="#">
                    <div class="col-md-4 web">
                        <li>
                            <object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.svg" type="image/svg+xml">
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.png">
                            </object>
                            <p class="thin">Webutvikling</p>
                        </li>
                    </div>
                </a>
            </ul>
        </div>
    </div>
</div>

CSS

这是这个问题最重要的 CSS:

.forsideikonholder .prosess {
    width: 80%;
    margin: auto;
}

.forsideikonholder object {
    width: 50%; 
}

我试过这样做，但正如我所提到的，它似乎太复杂了，而且我没有选择正确的对象。

.forsideikonholder a:hover {
        width: 60%; 
    }

  .forsideikonholder object:hover {
        width: 60%; 
    }

这是网站:http://goo.gl/kbWlGR

向下滚动直到您看到带有 3 个图标的橙色部分。

Answer 1

a 标签是一个内联元素，默认情况下不能修改它的大小。您必须在此处使用 display: block; 将您的 a 标签转换为 block 。这样您就可以玩弄它们的大小(无需更改 :hover 规则中的任何内容)。

此外，您的标记是错误的:ul 不能包含除 li 标签之外的任何其他内容:移动您的 li 标签来制作它们封装按钮的全部内容。