Ajout d'une classe pour le hover des éléments d'une liste

sass/list.scss

@@ -30,10 +30,6 @@
                 border-right: 1px solid var(--border-color);
                 margin-right: -1px;
             }
-
-            &:hover {
-                background-color: var(--border-color);
-            }
         }
 
         .title {
@@ -50,4 +46,10 @@
             max-width: 90%;
         }
     }
+
+    &.hover {
+        .item:hover {
+            background-color: var(--border-color);
+        }
+    }
 }

views/pages/ajouter-un-album.ejs

@@ -15,7 +15,7 @@
         </div>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="item" v-if="!loading" v-for="item in items">
             <a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
             <div class="grid grid-cols-2 md:grid-cols-4">

views/pages/composants.ejs

@@ -318,6 +318,7 @@
     <i class="icon-blind">.icon-blind</i>
 
     <h2 id="listes">Les listes</h2>
+    <h3>Liste normale</h3>
     <div class="grid grid-cols-1 md:grid-cols-2 list">
         <div class="item" v-for="item in items">
             <span class="title">
@@ -340,6 +341,29 @@
     &lt;/div&gt;
 &lt;/div&gt;
     </pre>
+    <h3>Liste avec effet au hover</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
+        <div class="item" v-for="item in items">
+            <span class="title">
+                {{ item.title }}
+            </span>
+            <div class="grid grid-cols-2 md:grid-cols-4">
+                <div>
+                    <img :src="item.thumb" :alt="item.title" />
+                </div>
+                <div class="md:col-span-3">
+                    {{ item.lorem }}
+                </div>
+            </div>
+        </div>
+    </div>
+    <pre>
+&lt;div class="grid grid-cols-1 md:grid-cols-2 list hover"&gt;
+    &lt;div class="item"&gt;
+        Contenu
+    &lt;/div&gt;
+&lt;/div&gt;
+    </pre>
 
     <h2 id="paginations">Les paginations</h2>
     <nav class="pagination" role="navigation" aria-label="Pagination">

views/pages/mon-compte/ma-collection/index.ejs

@@ -43,7 +43,7 @@
             </select>
         </div>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 list">
+    <div class="grid grid-cols-1 md:grid-cols-2 list hover">
         <div class="item" v-if="!loading" v-for="item in items">
             <span class="title">
                 <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>