Javascript 悬停时更改对象的大小

我试图使用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>

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

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

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

以下是网站：

---

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

A

A

标记是内联元素，默认情况下无法修改其大小。您必须在这里使用

display:block将
a
标记转换为块。这样，您就可以使用它们的大小（无需更改
：hover
规则中的任何内容）

此外，您的标记是错误的：
ul
不能包含除
li
标记以外的任何内容：移动
li
标记，使其封装按钮的全部内容。
a
a
标记是一个内联元素，默认情况下无法修改其大小。您必须在这里使用
display:block将
a
标记转换为块。这样，您就可以使用它们的大小（无需更改
：hover
规则中的任何内容）

此外，您的标记是错误的：
ul
不能包含除
li
标记以外的任何内容：移动
li
标记，使其封装按钮的全部内容。

.forsideikonholder a{
显示：块；
}
.forsideikonholder a{
显示：块；
}
a标记是内联的，因此css宽度对它们没有影响。谢谢。那么你建议怎么做呢？首先，你的HTML标记是无效的，锚定标记不能是UL元素的直接子元素，只有LI或模板可以支持你。它不是锚定标签，而是链接到不同站点的标签。但无论如何，我要把它们移到li元素，如果这是你的意思的话。标记是内联的，所以css宽度对它们没有影响。谢谢。那么你建议怎么做呢？首先，你的HTML标记是无效的，锚定标记不能是UL元素的直接子元素，只有LI或模板可以支持你。它不是锚定标签，而是链接到不同站点的标签。但无论如何，如果你是这个意思的话，我将把它们转移到li element。谢谢。这是一个很好的解释。解决了大小的问题，但是你有没有一个有效的解决方案来改变物体的颜色？如何改变颜色取决于物体是什么。在这里，我看到
a
标记中的文本就是文本，所以使用
color
属性就足够了。关于SVG图标，这将更加棘手。我已经很久没有玩SVG了，但是，由于这些图标并不直接在DOM树中，我在这里看到的唯一解决方案是使用JavaScript（也许有更好的方法，只使用CSS）在父项（a
标记）悬停时修改图标的样式。谢谢。是的，就像我想的那样。谢谢你的帮助：）谢谢。这是一个很好的解释。解决了大小的问题，但是你有没有一个有效的解决方案来改变物体的颜色？如何改变颜色取决于物体是什么。在这里，我看到
a
标记中的文本就是文本，所以使用
color
属性就足够了。关于SVG图标，这将更加棘手。我已经很久没有玩SVG了，但是，由于这些图标并不直接在DOM树中，我在这里看到的唯一解决方案是使用JavaScript（也许有更好的方法，只使用CSS）在父项（a

标记）悬停时修改图标的样式。谢谢。是的，就像我想的那样。谢谢你的帮助：）

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

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