Question

所以我必须实现一个Jquery函数，其中每个li元素正在执行:hover伪类（只改变背景颜色）。因此，如果我将鼠标悬停到第4个元素，则所有以前的li元素（第1个，第2个，第3个）应该具有来自:hover伪类的改变的背景颜色!!但是，如果我再次使用鼠标向上移动:hover效果应该消失（正常的背景颜色），直到我的鼠标点（如果它在第二个元素上，只有第一个和第二个现在有悬停效果）。 ..我完全不知道如何创建这样的方法...我做了像

这样的事情

$('ul li').on('mouseenter') { 
$(this).addClass('hover'); //alternatively $(this).css('background-color', 'grey'); 
}

但它不会删除任何:hover效果，并且会使失败成为可能，因为只有第一个和第五个li元素具有:hover效果，但所有这些都保持正常，我不想......你能帮助我吗？

Answer 1

事实上，这可以完全用css完成。这不需要jQuery或JavaScript。你应该考虑使用这样的一些html结构：

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
var objects = [];

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

camera.position.z = 1000;

var startColor;

function init() {
    scene.add( new THREE.AmbientLight( 0x0f0f0f ) );

    var light = new THREE.SpotLight( 0xffffff, 1.5 );
    light.position.set( 0, 500, 2000 );

    scene.add(light);

    var geometry = new THREE.BoxGeometry( 40, 40, 40 );
    var geometry = new THREE.SphereGeometry( 40, 40, 40 );

    for (var i = 0; i < 100; i++) {
        var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

        object.position.x = Math.random() * 1000 - 500;
        object.position.y = Math.random() * 600 - 300;
        object.position.z = Math.random() * 800 - 400;

        object.castShadow = true;
        object.receiveShadow = true;

        scene.add( object );

        objects.push( object );
    }

    var controls = new THREE.DragControls( objects, camera, renderer.domElement );
    controls.addEventListener( 'dragstart', dragStartCallback );
    controls.addEventListener( 'dragend', dragendCallback );
}

function dragStartCallback(event) {
    startColor = event.object.material.color.getHex();
    event.object.material.color.setHex(0x000000);
}

function dragendCallback(event) {
    event.object.material.color.setHex(startColor);
}

function animate() {
    requestAnimationFrame( animate );

    renderer.render(scene, camera);
};

init();
animate();

然后你可以像这样使用css

<ul>
   <li><span>Menu item 1</span></li>
   <li>
      <span>Menu item 2</span>
      <ul>
         <li><span>Submenu item 1</span></li>
         <li>
            <span>Submenu item 2</span>
            <ul>
               <li><span>Subsubmenu item 1</span></li>
               <li><span>Subsubmenu item 2</span></li>
               <li><span>Subsubmenu item 3</span></li>
            </ul>
         </li>
         <li><span>Submenu item 3</span></li>
      </ul>
   </li>
</ul>

请参阅此jsfiddle：https://jsfiddle.net/aey5cusm/

或者，如果您按照单个列表的第一，第二，第二，也可以使用css完成。

li:hover > span {
    background: #9a0000;
}

看看这个jsfiddle：https://jsfiddle.net/aey5cusm/1/

Answer 2

Link to working example on jsfiddle.net

因此，让我们从列表的一些示例标记开始：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

然后为你的＆＃39; hover＆＃39;：

提供一些css

.hover {
  background-color: red;
}

和一些javascript来提供功能：

$(function(){

    // Our list items.
    var listItems = $('ul').children();

    // An event listener over all list items.
    $('li').hover(hoverIn, hoverOut);

    // Find the index of the current element
    // and set all elements up to this element as hover.
    function hoverIn() {
       var index = listItems.index(this);
       $.each(listItems, function(idx, ele) {
          if (idx <= index) {
              $(this).addClass('hover');
          } else {
              $(this).removeClass('hover');
          }
       });
    }

    // Remove all hover.
    function hoverOut() {
      $.each(listItems, function(idx, ele) {
        $(this).removeClass('hover');
      });
    }

});

激活＆＃39;：悬停＆＃39;仅当鼠标向下移动列表并在鼠标向上移动时移除

2 个答案: