将鼠标悬停在其父元素<div>上时，如何放大<i>元素。我已经尝试过下面的代码，但是它不起作用

Question

请，如何增加中的元素大小。我已经尝试过了，但是没有用。

 <script>
function enlarger(){
document.getElementsById('enlarge').style.transform="scale(1.5)";
}
</script>


<style>
#enlarge{transition:transform .2s;}
</style>


<div onmouseover="enlarger()">
<i class="fa fa-desktop color"id="enlarge"></i>
<h2 style="font-size:150%; color:green"> Digital Capacity Development</h2>
<p style="text-align:justify;">This  is a paragraph text</p>
</div>

Answer 1

您可以使用纯CSS做到这一点。

div:hover i {
    transform: scale(1.5);
}