影响错误元素的jquery事件

因此，我正在开发一个视频网站UI，该UI具有可拖动/可拖放/可排序（jquery）瓷砖，可链接到特定视频。正如你所看到的，当你鼠标滑过它们时，它们都会发疯

应该发生的事情——以及我试图编写的代码——是一个框上的鼠标悬停触发一个平铺（div）的添加/删除类

---

有人有什么想法吗

主要原因是您将

脚本

标记作为

#sortable1

的子项。因此，您的

$（“#可排序1 li:n子项（1）”）

选择器未生成所需的结果

一个可能的解决办法是尝试

http://s199881165.onlinehome.us/transfem/sortable%20test/sortable2.php

作为更好的解决方案，我建议您使用

$( "#sortable1 li:eq(1)" )

而不是像这样为每个

li

注册处理程序

$(function() {
    $( "#sortable1 > li").hover(function(){
        $(this).next().children('div').removeClass( "boxxySTILL", 200, "linear" ).addClass( "boxxy", 200, "linear" );
    }, function(){
        $(this).next().children('div').removeClass( "boxxy", 200, "linear" ).addClass( "boxxySTILL", 200, "linear" );
    });
});

好的，我在中所做的是将class

框添加到您试图显示的每个div中。它允许您将JavaScript清理为：

HTML:

请共享代码，而不仅仅是添加URL。当您将鼠标移到第一个条目上时，如果您想在第二个条目中添加/删除类
boxxy
，则在此处，所有类在一个单独的条目中分开。HTML中真的不应该有这么多的
标记。我们可能会将其清理成几行JavaScript，并将其放在
标记中，但您需要稍微修改HTML以使其更容易。考虑在ID上使用类，只需在jQuery选择器中指定相对性即可。另外，我不确定您的网站上发生了什么，但在JSFIDLE演示中，它完全按照您的意愿工作。尝试清理您的代码，并在文档顶部整合所有JavaScript。非常感谢！我给自己的每一个小挑战都教会了我更多关于javascript、css等的知识。感谢你帮助我理解这些令人惊讶的废话。
  $(function() {
  $( "#sortable1 li:nth-child(1)" ).mouseenter(function() {

  $( "#theone1" ).removeClass( "boxxySTILL", 200, "linear" ).addClass( "boxxy", 200, "linear" );

});

  $(function() {
  $( "#sortable1 li:nth-child(1)" ).mouseleave(function() {

    $( "#theone1"  ).removeClass( "boxxy", 200, "linear" ).addClass( "boxxySTILL", 200, "linear" );

}); 

  });
});

<div id="timeline">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default" id="thelistitemyo"><div id="theone1" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/435/247/435247991_640.jpg);" width="100%"></div><span class="spannin">Demo 4</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone2" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone3" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/398/394/398394157_640.jpg);" width="100%"></div><span class="spannin">begun - san francisco</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id     ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone4" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/435/248/435248805_640.jpg);" width="100%"></div><span class="spannin">Demo 5</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone5" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/424/127/424127918_640.jpg);" width="100%"></div><span class="spannin">3 Second Video</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id    ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone6" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone7" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/334/173/334173957_640.jpg);" width="100%"></div><span class="spannin">Down - Time Lapse - 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone8" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/343/179/343179766_640.jpg);" width="100%"></div><span class="spannin">Mixtape 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id  ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>

        <li class="ui-state-default" id="thelistitemyo"><div id="theone9" class="box boxxySTILL" style="background-image: url(http://b.vimeocdn.com/ts/370/039/370039831_640.jpg);" width="100%"></div><span class="spannin">Bravo TV 3sec</span><div class="desrippor">Mnulla adipiscing risus purus, eu tempus felis. Morbi sit amet lectus felis, mattis venenatis augue. Praesent pretium egestas mauris eget scelerisque. Etiam euismod libero ac eros commodo interdum. Curabitur pulvinar ante nec diam euismod vestibulum. Nam tincidunt diam quis est facilisis varius. Aliquam consequat erat sed enim facilisis eget sollicitudin felis laoreet. Nulla turpis magna, fermentum id     ornare ut, bibendum at libero. Etiam dapibus congue enim sit amet suscipit. Donec ut purus ut nisi laoreet porta. Donec mattis, lectus sit amet semper tincidunt, ligula erat semper erat, a tincidunt est odio in lacus. Proin nisl ipsum, rhoncus tincidunt mattis at, blandit eget lacus. Ut fringilla hendrerit vulputate. Sed at neque et nibh dignissim adipiscing. Nulla consequat velit ut ante tristique lacinia. Fusce in nulla vel augue sagittis faucibus.</div></li>
    </ul>
</div>

$(function()
{
    $( "#sortable1, #sortable2" ).sortable(
    {
        connectWith: ".connectedSortable"
    }).disableSelection();

    $('#sortable1 li').mouseenter(function()
    {
        $(this).find('.box').removeClass('boxxySTILL', 200, 'linear')
                            .addClass('boxxy', 200, 'linear');
    });

    $('#sortable1 li').mouseleave(function()
    {
        $(this).find('.box').removeClass('boxxy', 200, 'linear')
                            .addClass('boxxySTILL', 200, 'linear');
    });
});