Javascript 在鼠标上方设置动画（<；李>；要素_Javascript_Jquery_Html_Css

Javascript 在鼠标上方设置动画（<；李>；要素

javascript jquery html css

Javascript 在鼠标上方设置动画（<；李>；要素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个.ctp文件，看起来像这样： <body id="bodyId"> <div id="header"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-offset-6" id="header_menuId"> <ul cla

我有一个.ctp文件，看起来像这样：

<body id="bodyId">
    <div id="header">
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-offset-6" id="header_menuId">
                <ul class="nav nav-pills">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">Login</a>
                    </li>
                    <li><a href="#">SignUp</a>
                    </li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal">Search</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="content">
        <?php echo $this->Session->flash(); ?>
        <?php echo $this->fetch('content'); ?>
    </div>
    <div id="footer"></div>
    <?php echo $this->element('sql_dump'); ?>
</body>

$(function () {
    $("#header_menuId").children("li").each(function () {
        $(this).mouseover(function () {
            ($this).animate({
                height: '+=150px',
                width: '+=150px'
            });
        });
    });
});

不管怎样，它似乎不起作用。我试过了。因为，我是CakePHP和JQuery的新手，可能我在这里遗漏了一些东西。我也尝试使用mouseenter（）代替mouseover（）。.js文件已正确连接到我的视图。我通过创建一个简单的函数来检查它，我在鼠标单击特定元素时调用了该函数。

您的代码中似乎有一个错误：

$(function() {
$("#header_menuId").children("li").each(function(){
    $(this).mouseover(function(){ 
        ($this).animate({ // <------- Here, change to $(this)
            height: '+=150px',
            width: '+=150px'
        });
    });
});
});

$（函数（）{
$（“#header_menuId”）.children（“li”）.each（function（）{
$（this）.mouseover（函数（）{
（$this）。设置动画（{/
使用.find
而不是.children
作为li
在#header\u menuId
的.children
中直接查找，并将（$this）
更改为$（this）

您也可以使用.on
-mouseover
直接将事件绑定到li
，如下所示：
$("#header_menuId li").on('mouseover',function(){
    $(this).animate({
        height: '+=150px',
        width: '+=150px'
    });
}).on('mouseout',function(){
    $(this).animate({
        height: '-=150px',
        width: '-=150px'
});

尝试使用悬停，am连接的悬停处理程序直接进入li
元素，在这种情况下不需要每个函数：
$("#header_menuId li").hover(function () {
   $(this).stop().animate({ // mouseenter
     height: '+=150px',
     width: '+=150px'
   });
 }, function () {
   $(this).stop().animate({ // mouseleave
    height: '-=150px',
    width: '-=150px'
   });

});

您可以将CSS与：hover一起使用，以缩放当前悬停的锚点


a{
显示：内联块；
-webkit过渡：所有200毫秒的易用性；
-webkit转换：规模（1）；
-ms转换：所有200毫秒的速度都很慢；
-ms变换：尺度（1）；
-moz转换：所有200毫秒的速度都很慢；
-moz变换：比例（1）；
过渡：所有200毫秒的速度都很慢；
变换：比例（1）；
}
a:悬停{
-webkit过渡：所有200毫秒的易用性；
-webkit转换：比例（1.5）；
-ms转换：所有200毫秒的速度都很慢；
-ms变换：比例（1.5）；
-moz转换：所有200毫秒的速度都很慢；
-moz变换：比例（1.5）；
过渡：所有200毫秒的速度都很慢；
转换：比例（1.5）；
}









试试这个

$（函数（）{
$（“li”）.mouseover（函数（）{
$（此）。设置动画({
高度：'+=150px'，
宽度：'+=150px'
});
});
})；











（$this）
到$（this）
不起作用。纠正了这个错误。@Siddhant您可以创建JSFIDdle吗？也不需要each（）
这不是cakephp问题。这只是css或jquery问题。如果我使用jquery，我会使用$（文档）。on（'mouseover'，'header\menuId li'，函数（）{$（this）.animate（{高度：'+=150px'，宽度：'+=150px'}）；}）它的工作方式与您所说的完美使用css的方式相同，但是，当我尝试使用jquery时，它似乎不起作用。尝试了此处发布的所有jquery代码片段。@Siddhant您是否尝试了上述注释中的代码？请创建demo@Siddhant请检查，这是你想要的吗？是的，这是我想要的。我正在检查我的代码是否有任何其他问题。si它似乎与您先前在JSFDDL上发布的jquery snipper一起工作，并且与您发布的css更改一起工作。。
$("#header_menuId li").hover(function () {
   $(this).stop().animate({ // mouseenter
     height: '+=150px',
     width: '+=150px'
   });
 }, function () {
   $(this).stop().animate({ // mouseleave
    height: '-=150px',
    width: '-=150px'
   });

});