Question

所以我基本上有一个箭头型的东西，当你将鼠标悬停在它上面时我想向上移动，然后当你鼠标移开时它会向下移动。为此，我将箭头放在父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);
}

Answer 1

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

您是否尝试使用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); }); });？

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';

class CustomODataAdaptor extends ODataV4Adaptor {
      processResponse(data: Object, dataManager: DataManager, query: Query) {
       /**
        * Return the result in the { result, count } pair when query has requiresCount() enabled.
        * else simply return the entity collection.
        *  Response structure:
        *  {  
        *   "count": 15,
        *   "value": [{}, {}.....]
        *    }
        */
       return query.isCountRequired ? { result: data['value'], count: data['count'] } : data['value'];
   }
}

//Assign the custom adaptor as follows
new DataManager({ url: SERVICE_URI, adaptor: new CustomODataAdaptor })
   .executeQuery(new Query().take(8).requiresCount()).then((e) => {
  // e.result will hold the result
});

＆＃13;

属性仅适用于内部分区

1 个答案: