javascript - Comment obtenir l'effet d'afficher une bordure rouge au survol de la souris

Question

Qui a réalisé cet effet ? C'est ce que j'ai écrit, en utilisant border-right:1px solid #eee;border-bottom:1px solid #eee; how to use ul li:hover{border-color:#ed9639;} lorsque la souris survole Qu'il y ait aussi un cadre pixel rouge à gauche

Answer 1

Il semble que chaque élément n'a que les côtés droit et inférieur ?

Je pense qu'il serait préférable de changer chaque élément pour avoir un côté gauche et un côté inférieur. Que diriez-vous de définir la couleur du côté gauche des éléments adjacents lors du survol ?

Exemple :

*{
    box-sizing:border-box;
}
.wrap{
    width:300px;
    
}
.item{
    width:75px;
    float:left;
    text-align:center;
    border:1px solid #eee;
    border-right-width:0;
}
.item:last-child{
    border-right-width:1px;
}

.item:hover{
    border-left-color:red;
    border-bottom-color:yellow;
}
.item:hover + .item{
    border-left:1px solid yellow;
}
.item:last-child:hover{
    border-right:1px solid yellow;
}

<p class="wrap">
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
    <p class="item">
        hello
    </p>
</p>

http://runjs.cn/detail/ibxy9qab

Answer 2

ul li:hover{
  border: 1px solid #ed9639;
}

Answer 3

boîte-ombre

Answer 4

Est-il bloqué par le li à gauche ? Celui à l’extrême gauche a-t-il un bord rouge ?

Answer 5

La frontière gauche ne marche pas ?

Answer 6

Est-ce parce que le poids de votre sélecteur est trop petit et est écrasé ?

Answer 7

Lors du survol, le z-index doit être défini. Plus haut que les autres niveaux pour que vos frontières ne soient pas couvertes

Answer 8

Merci pour vos réponses, j'ai trouvé une solution et je la partage avec vous
http://www.jb51.net/css/14548...