javascript - 如何在鼠标悬停时以动态高度提供圆 Angular 图像

Question

我想在 div 上鼠标悬停时显示圆 Angular 图像。div 内容是动态的。所以我需要相应地增加图像的高度。如何做到这一点..？请帮忙

Answer 1

如果我理解正确并且你想在鼠标悬停时将 div 的 Angular 圆化，你可以这样做。

放置 4 个带有 Angular 图像的 div 作为背景。

CSS:

d1, d2, d3, d4

{

   position:absolute;
   display:none;

}

d1
{

   background-image:url('cornertop.extension');
   top:0px;
   left:0px;

}

等对所有人

html:

<div id="yourid" onmouseover="roundCorners();" onmouseout="deRoundCorners()">
content
</div>

JavaScript:

function roundCorners()
{

   document.getElementById('d1').style.display=block;
   document.getElementById('d2').style.display=block;
   document.getElementById('d3').style.display=block;
   document.getElementById('d4').style.display=block;

}

function deRoundCorners()
{

   document.getElementById('d1').style.display="none";
   document.getElementById('d2').style.display="none";
   document.getElementById('d3').style.display="none";
   document.getElementById('d4').style.display="none";

}

如果我理解正确，应该这样做......如果不是......请提供更多细节。