Comment faire pour masquer les modifications apportées aux éléments dans le CSS

Question

J'essaie d'apporter des modifications aux éléments dans le CSS lorsqu'un élément est survolé. En changeant spécifiquement un border de solid à dotted, en changeant de couleur, comment faire?

EDIT:

Peut-être que je besoin d'être plus précis sur le contexte ici est mon code actuel:

li { 
    font-family: 'Roboto', sans-serif; 
    font-size: 20px; 
    color: black; 
    border-bottom: 1px solid black; 
} 

li:hover { 
    border-bottom: 1px dotted black; 
    opacity: 1; 
    transition: opacity 1s ease-in-out; 
} 

Answer 1

Vous pouvez placer 2 divs au-dessus de l'autre avec différents types de temps puis les passer en .

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
div { 
 
    width: 11rem; 
 
    height: 11rem; 
 
    margin: auto; 
 
    background-color: #f2f2f2; 
 
    border: 5px #bbb solid; 
 
    border-radius: 2rem; 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 
.dotted { 
 
    border: 5px #bbb dotted; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 0; 
 
} 
 
.solid { 
 
    position: relative; 
 
    z-index: 1; 
 
    transition: opacity 1s; 
 
} 
 
.solid:hover { 
 
    opacity: 0; 
 
}

<div class="solid"></div> 
 
<div class="dotted"></div>

Answer 2

Here est une supercherie CSS qui donne cet effet. L'inconvénient étant l'intérieur ne peut pas être transparent.

div { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    border: 3px dotted red; 
 
    background: red; 
 
    transition: 1s ease-in-out all; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: white; 
 
} 
 

 
div:hover { 
 
    background: transparent; 
 
}

<div></div>

Answer 3

Vous pouvez y parvenir en utilisant pseudoelements. Cette version fonctionne même avec un fond transparent. Ajout d'un dégradé au corps pour le montrer.

div { 
 
    position: relative; 
 
    
 
    /* just styles for demo */ 
 
    width: 250px; 
 
    height: 250px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    transition: 1s ease-in-out all; 
 
    border-radius: 10px; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    top: -5px; 
 
    bottom: -5px; 
 
    left: -5px; 
 
    right: -5px; 
 
    border-width: inherit; 
 
    border-style: dotted; 
 
    border-radius: inherit; 
 
} 
 

 
div, div:after { 
 
    border-color: tomato; 
 
} 
 

 
div:hover { 
 
    border-color: transparent; 
 
} 
 

 
/* just styles for demo showing that this will work even for transparent background */ 
 
body { 
 
    background-image: linear-gradient(to bottom, transparent, #ddd); 
 
    min-height: 100vh; 
 
    margin: 0; 
 
}

<div></div>

Answer 4

Ce n'est pas une solution soo élégante mais il en va de 'Niet de the Dark Absol' commentaire sur ma première question. Voici le code:

li { 
    font-family: 'Roboto', sans-serif; 
    font-size: 20px; 
    color: black; 
    position: relative; 
    border-bottom: 1px solid transparent; /* invisible border */ 
} 

li:before, li:after { 
    content: ''; 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    margin: -1px; /* same as border width */ 
    transition: opacity 1s linear; 
} 

li:before { 
    border-bottom: 1px solid #000; 
} 

li:after { 
    border-bottom: 1px dotted #000; 
    opacity: 0; 
} 

li:hover:before { 
    opacity: 0; 
} 

li:hover:after { 
    opacity: 1; 
}