gpt4 book ai didi

html - 如何使用 Hover 更改 <iframe> 元素的不透明度?

转载 作者:行者123 更新时间:2023-11-28 15:04:39 25 4
gpt4 key购买 nike

我试图在将鼠标悬停在 iframe 元素上时更改它的不透明度。具体来说,它是一个 soundcloud 图标。

我的代码是:

<html>
<body>

<style>

iframe:hover {
opacity: 0.5;
}

</style>


<iframe allowtransparency="true" scrolling="no" frameborder="no"
src="https://w.soundcloud.com/icon/?url=http%3A%2F%2Fsoundcloud.com%2Fuser-755009245-417101073&color=orange_white&size=32"
style="width: 32px; height: 32px;">
<iframe>

</body>
</html>

当我将鼠标悬停在 soundcloud 图标上时,不透明度没有变化。如果我取消“悬停”位,图标的不透明度会如您预期的那样改变。

预先感谢您的所有建议:-)

最佳答案

我确定您使用的是 IE。但是,当我在 Chrome 中打开它时,您的代码工作正常。您使用的是什么浏览器版本?无论如何,以下代码适用于 IE 和 Chrome。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe</title>
</head>

<style>
iframe:hover {
display: block;
position: relative;
opacity: 0.5;
width: 10px;
cursor: pointer;
}
</style>

<body>

<iframe src="https://w.soundcloud.com/icon/?url=http%3A%2F%2Fsoundcloud.com%2Fuser-755009245-417101073&color=orange_white&size=32" style="width: 32px; height: 32px;" allowfullscreen></iframe>
</body>

</html>

关于html - 如何使用 Hover 更改 &lt;iframe&gt; 元素的不透明度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59254265/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com