响应jQuery函数

当jQuery达到特定的屏幕大小时，我使用的以下脚本目前正在工作。但是，我的window.onmousemove事件不再起作用。当您将鼠标悬停在#hwdo-panel ul li上时，div .show-info将在div中跟随我的光标。但当我将if ($(window).width() < 992){添加到脚本中时，div不再跟随我的光标。当我试图实现是在屏幕上高于992调用window.onmousemove脚本和任何低于992显示.show-info自己。我做错了什么我下面的脚本？

if ($(window).width() < 992){
  $('#hwdo-panel ul li').hover(function(e){
   var figure = $(this).find('.show-info');
    if(figure){
        window.onmousemove = function (e) {
            var x = e.pageX,
                  y = e.pageY;
            figure.offset({ top: (y + 0), left: (x + 50)});
        }
    }
 });
}

HTML语言

<ul>
     <li>
           <h3>Details</h3>
           <p>this is a test</p>
      </li>
      <li>
            <h3>Passion</h3>
           <p>this is a test</p>
      </li>
      <li>
            <h3>Courage</h3>
           <p>this is a test</p>
      </li>
      <li>
            <h3>Care</h3>
           <p>this is a test</p>
      </li>
 </ul>

CSS

#hwdo-panel {
     position: relative;

ul {
    font-weight: 900;
    list-style: none;
    margin: 0;
    padding: 0;     
    
    &:hover > li {
        opacity:0.1;
    }
    
    li {
        border-bottom: 2px solid #FFF;
        margin-bottom: 1em;
        -webkit-transition:0.5s;
                      transition:0.5s;
    
        &:hover{
            opacity:1;
        }

        &:last-child {
            border-bottom: none;
        }

        &:hover .show-info {
            display: block;
        }   

        .show-info {
            display: block;
            top: 0;
            left: 0;
            position: relative;
            padding: 1em 0 1em 0;
            font-weight: 500;
            width: 100%;
            
            @media (min-width:992px) {
                display: none;
                top: 0;
                left: 0;
                position: absolute;
                background: var(--pink);
                padding: 2em;
                font-weight: 500;
                width: 30%;
                z-index: 90;
            }
        }

        h3 {
            position: relative;
            color: transparent;
            text-transform: uppercase;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: white;
            display: inline-block;
            width: 100%;
            letter-spacing: 5px;
            cursor: pointer;

            &:before {
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                color: var(--pink);
                content: attr(data-hover);
            }

            &:hover:before {
                width: 100%;     
                transition: all 3s cubic-bezier(0.17, 0.67, 0.32, 0.87);
            }

            &:after {
                content: '+';
                position: relative;
                float: right;
                font-size: .5em;
                color: var(--white);
                -webkit-text-stroke-width: 0px;
                -webkit-text-stroke-color: transparent;
                font-weight: 500;
            }
            &:hover:after {
                color: var(--pink);
            }
        }
    }
}
}

Example

现在你只是在窗口大小合适的情况下示例化hover处理程序，窗口大小改变时它不会更新。嵌套的处理程序意味着你在每次hover状态改变时示例化一个新的mousemove处理程序。
相反，您可以让一个mousemove处理程序一直运行，并在其中检查窗口大小。使用CSS选择器可以方便地检测悬停状态，因此您可以不必担心专门监视悬停事件。
这是未经测试的，但应该很接近：

window.onmousemove = e => {
  // handle your window size check inside the mousemove handler:
  if ($(window).width() > 991) return;

  // use a CSS selector to detect the hover state:
  let figure = $('#hwdo-panel ul li:hover .show-info');

  // now do your positioning
  if (figure) {
    figure[0].offset({
      top: e.pageY,
      left: e.pageX
    })
  }
}

响应jQuery函数

1条答案

相关问题

热门标签

最新问答