用jquery改变样式:after

时间:2021-11-01 19:44:38

I made a short example of the problem I'm dealing with.

我举了一个我正在处理的问题的简短例子。

Html code:

<ul class="BB"> 
  <li><a href="1">1</a></li>
  <li><a href="2">2</a></li>
  <li><a href="3">3</a></li>
</ul>

CSS code:

.BB a:hover{
    color: #000;
}

.BB > li:after {
    border-right: 2px solid #DDD;
    border-bottom: 2px solid #DDD;
}

Question: How to change the border-right and border_bottom color to #000 when mouse is on a:hover but only the element <li> which contains <a> that I'm pointing with the mouse?

问题:当鼠标位于a时,如何将border-right和border_bottom颜色更改为#000:悬停但只包含

  • 元素,其中包含我用鼠标指向的?

  • I tried jquery like this

    我试过像这样的jquery

    $('.BB a').hover(function(){
      $('ul.BB > li').toggleClass('hov'); 
    }
    

    and the CSS

    和CSS

    .BB > li.hov:after {
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    

    but this way I change all the <li>

    但这样我改变了所有的

  • 1 个解决方案

    #1


    2  

    First off, the pseudo element doesn't have a content property. If it doesn't have a content property/value, the pseudo element won't show up.

    首先,伪元素没有content属性。如果它没有content属性/值,则不会显示伪元素。

    .BB > li:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    

    If you want to change the class of the li element when hovering over the child a element, you need to use $(this) within the event handler. Then you would transverse the DOM using the .parent() method - $(this).parent('li').

    如果要在将子元素悬停在子元素上时更改li元素的类,则需要在事件处理程序中使用$(this)。然后你将使用.parent()方法横向DOM - $(this).parent('li')。

    Example Here

    $('.BB a').hover(function(){
      $(this).parent('li').toggleClass('hov'); 
    });
    

    Without jQuery:

    You may not actually need jQuery to do any of this though. You could just use the CSS :hover pseudo class:

    您可能实际上并不需要jQuery来执行任何此操作。你可以使用CSS:hover伪类:

    Example Here

    .BB > li:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    .BB > li:hover:after {
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    

    The only difference with this is that the color of the border is changing when hovering over the li elements rather than the a elements as it does in the jQuery example. If this is a problem, you could also add the psuedo element to the a elements rather than the li elements:

    与此唯一的区别是,当悬停在li元素而不是像jQuery示例中的a元素时,边框的颜色会发生变化。如果这是一个问题,您还可以将psuedo元素添加到元素而不是li元素:

    Example Here

    .BB > li a:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    .BB > li:hover a:after {
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    

    #1


    2  

    First off, the pseudo element doesn't have a content property. If it doesn't have a content property/value, the pseudo element won't show up.

    首先,伪元素没有content属性。如果它没有content属性/值,则不会显示伪元素。

    .BB > li:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    

    If you want to change the class of the li element when hovering over the child a element, you need to use $(this) within the event handler. Then you would transverse the DOM using the .parent() method - $(this).parent('li').

    如果要在将子元素悬停在子元素上时更改li元素的类,则需要在事件处理程序中使用$(this)。然后你将使用.parent()方法横向DOM - $(this).parent('li')。

    Example Here

    $('.BB a').hover(function(){
      $(this).parent('li').toggleClass('hov'); 
    });
    

    Without jQuery:

    You may not actually need jQuery to do any of this though. You could just use the CSS :hover pseudo class:

    您可能实际上并不需要jQuery来执行任何此操作。你可以使用CSS:hover伪类:

    Example Here

    .BB > li:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    .BB > li:hover:after {
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }
    

    The only difference with this is that the color of the border is changing when hovering over the li elements rather than the a elements as it does in the jQuery example. If this is a problem, you could also add the psuedo element to the a elements rather than the li elements:

    与此唯一的区别是,当悬停在li元素而不是像jQuery示例中的a元素时,边框的颜色会发生变化。如果这是一个问题,您还可以将psuedo元素添加到元素而不是li元素:

    Example Here

    .BB > li a:after {
        content: '';
        border-right: 2px solid #DDD;
        border-bottom: 2px solid #DDD;
    }
    .BB > li:hover a:after {
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
    }