我正在尝试使用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个图标的橙色部分。
答案 0 :(得分:3)
a
标记是内联元素,默认情况下无法修改其大小。您可以在此处将a
代码转换为display: block;
的代码块。这样您就可以使用他们的尺寸进行游戏(不会更改:hover
规则中的任何内容)。
此外,您的标记错误:ul
不得包含li
标记以外的任何内容:移动li
标记,使其封装按钮的全部内容。< / p>
答案 1 :(得分:2)
.forsideikonholder a {
display:block;
}