属性仅适用于内部分区

问题描述 投票：2回答：1

所以我基本上有一个箭头型的东西，当你将鼠标悬停在它上面时我想向上移动，然后当你鼠标移开时它会向下移动。为此，我将箭头放在父div中，并检测来自父div的鼠标悬停。这是我的代码：

HTML：

<div class="outercircle">
    <div class="circle">
        <div class="innercircle"></div>
    </div>
</div>

CSS：

.outercircle {
    border: 1px solid black;
    margin-top: 80vh;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.circle {
    width: 60px;
    height: 60px;
    border: 7px solid black;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.innercircle {

    display: inline-block;
    margin-top: 15%;
    margin-left: 24.5%;
    width: 40%;
    height: 40%;
    border-top: 7px solid black;
    border-right: 7px solid black;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

JavaScript的：

<script>
        $(document).ready(function() {
            var $outercircle = $(".outercircle");
            var $circle = $(".circle");

            $outercircle.hover(function() {
                $circle.animate({
                    marginTop: 0
                }, 200);
            });

            $outercircle.mouseout(function() {
                $circle.animate({
                    marginTop: 20
                }, 200);
            });
        })
</script>

问题是它只有在鼠标悬停在内部潜水（.innercircle）时才有效。此外，cursor：指针也仅适用于.innercircle。任何帮助非常感谢，节日快乐。

编辑：看到这个简化版本适用于jsfiddle，这里是所有的HTML和CSS，以防它与它有关。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylz.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>Thomas Urbanak</title>
        <script>
            $(document).ready(function() {
                var $outercircle = $(".outercircle");
                var $circle = $(".circle");

                $outercircle.mouseenter(function() {
                    $circle.animate({
                        marginTop: 0
                    }, 200);
                });

                $outercircle.mouseleave(function() {
                    $circle.animate({
                        marginTop: 20
                    }, 200);
                });
            })
        </script>
    </head>
    <body> 
        <div id="titlet">
            <ul id="menu">
                <li class="menu"><a href="#">home</a></li>
                <li class="menu"><a href="#">work</a></li>
                <li class="menu"><a href="#">about</a></li>
            </ul>
            <h1 class="title">BOB.BLUBLA</h1>
            <hr>
            <p class="subtitle">This is a paragraph, made up of words.</p>
        </div>
        <div class="outercircle">
            <div class="circle">
                <div class="innercircle"></div>
            </div>
        </div>
    </body>
</html>

CSS：

/*menu*/
#menu {
    font-family: "Roboto", sans;
    font-size: 20px;
}

.menu {
    display: inline-block;
}

a {
    text-decoration: none;
    color: black;
    -webkit-transition: border-bottom .15s;
    transition: border-bottom .15s;
}

a:hover {
    border-bottom: 5px solid #ff5c5c;
}

#menu, .menu {
    list-style: none;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}

/*title tile*/
#titlet {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;
}

.title {
    font-family: "titlefont", sans;
    text-align: center;
    font-size: 90px;
    margin-top: 250px;
}

hr {
    width: 20%;
    height: 7px;
    background: black;
    border: none;
    margin-top: -50px;
}

.subtitle {
    text-align: center;
    font-family: "Roboto", sans;
    font-size: 20px;
}

/*circle*/
.outercircle {
    border: 1px solid black;
    margin-top: 80vh;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.circle {
    width: 60px;
    height: 60px;
    border: 7px solid black;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.innercircle {

    display: inline-block;
    margin-top: 15%;
    margin-left: 24.5%;
    width: 40%;
    height: 40%;
    border-top: 7px solid black;
    border-right: 7px solid black;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
javascript jquery html css jquery-animate
1个回答
1
投票

我相信你的问题是你使用了错误的事件处理程序。

你有没有尝试过mouseenter和mouseleave而不是hover和mouseout？

 $(document).ready(function() {
    var $outercircle = $(".outercircle");
    var $circle = $(".circle");

    $outercircle.mouseenter(function() {
        $circle.animate({
            marginTop: 0
        }, 200);
    });

    $outercircle.mouseleave(function() {
        $circle.animate({
            marginTop: 20
        }, 200);
    });
});
.outercircle {
    border: 1px solid black;
    margin-top: 80vh;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.circle {
    width: 60px;
    height: 60px;
    border: 7px solid black;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.innercircle {

    display: inline-block;
    margin-top: 15%;
    margin-left: 24.5%;
    width: 40%;
    height: 40%;
    border-top: 7px solid black;
    border-right: 7px solid black;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outercircle">
    <div class="circle">
        <div class="innercircle"></div>
    </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.