javascript - scroll to in the iframe cannot trigger the mouseenter event

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮效果示例</title>
    <style>
        #A {
            border: 1px solid #000;
            /* 可选：为A div添加边框以便查看 */
            padding: 10px;
        }

        #B {
            height: 600px;
        }

        #B,
        #C {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            /* 可选：为B和C div添加边框以便查看 */
        }

        .child {
            margin-bottom: 5px;
            padding: 10px;
            border: 1px solid #eee;
            /* 可选：为B1, B2, B3 div添加边框以便查看 */
            transition: background-color 0.3s ease;
            /* 添加过渡效果 */
        }

        /* 鼠标悬浮在B1, B2, B3 div上时改变背景颜色 */
        #B1:hover,
        #B2:hover,
        #B3:hover {
            background-color: #007BFF;
            /* 背景颜色变为蓝色 */
            color: #fff;
            /* 文字颜色变为白色 */
        }
    </style>
</head>

<body>
    <div id="A">
        <div id="B">
            <div class="child" id="B1">B1</div>
            <div class="child" id="B2">B2</div>
            <div class="child" id="B3">B3</div>
        </div>
        <div id="C">C</div>
    </div>
    <iframe src="http://localhost:54365" width="100%" height="300px" scrolling="yes"></iframe>
</body>

</html>

http://localhost:54365 The embedded page has the same content as the current page。 hover does not trigger correctly when scrolling over the div of the iframe, but the mouse moves over the div and displays correctly

Want to display the effect correctly, or why is it not

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮效果示例</title>
    <style>
        #A {
            border: 1px solid #000;
            /* 可选：为A div添加边框以便查看 */
            padding: 10px;
        }

        #B {
            height: 600px;
        }

        #B,
        #C {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            /* 可选：为B和C div添加边框以便查看 */
        }

        .child {
            margin-bottom: 5px;
            padding: 10px;
            border: 1px solid #eee;
            /* 可选：为B1, B2, B3 div添加边框以便查看 */
            transition: background-color 0.3s ease;
            /* 添加过渡效果 */
        }

        /* 鼠标悬浮在B1, B2, B3 div上时改变背景颜色 */
        #B1:hover,
        #B2:hover,
        #B3:hover {
            background-color: #007BFF;
            /* 背景颜色变为蓝色 */
            color: #fff;
            /* 文字颜色变为白色 */
        }
    </style>
</head>

<body>
    <div id="A">
        <div id="B">
            <div class="child" id="B1">B1</div>
            <div class="child" id="B2">B2</div>
            <div class="child" id="B3">B3</div>
        </div>
        <div id="C">C</div>
    </div>
    <iframe src="http://localhost:54365" width="100%" height="300px" scrolling="yes"></iframe>
</body>

</html>

Want to display the effect correctly, or why is it not

Share Improve this question asked yesterday 贺琪恒 1 New contributor 贺琪恒 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

I'm guessing you mean the embedded page has the same body content, but you did not actually include your style element in its head as well? CSS does not "inherit" down into iframe, you need to give the document within the iframe its own styling information. – C3roe Commented 13 hours ago
Maybe you want to look into using external stylesheets, so that you don't have to repeat the same extended style block into each document. – C3roe Commented 13 hours ago

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You can use a querySelector for the component you want to interact inside a iframe from the DOM after Iframe gets loaded in that way you can wrap an iframe and customize it, in this case you could listen to the events you desire.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - scroll to in the iframe cannot trigger the mouseenter event - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)