悬停时更改对象的大小

时间:2015-07-04 07:57:07

标签: javascript jquery html css

我正在尝试使用CSS为我的对象添加悬停效果,但似乎html太复杂而无法更改。因此我向你征求意见。

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

我已经标记了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个图标的橙色部分。

2 个答案:

答案 0 :(得分:3)

a标记是内联元素,默认情况下无法修改其大小。您可以在此处将a代码转换为display: block;的代码块。这样您就可以使用他们的尺寸进行游戏(不会更改:hover规则中的任何内容)。

此外,您的标记错误:ul不得包含li标记以外的任何内容:移动li标记,使其封装按钮的全部内容。< / p>

答案 1 :(得分:2)

.forsideikonholder a {
       display:block;
    }