如何防止锚标记覆盖我的 CSS 样式

Question

我对这一切都很陌生。 我正在尝试使用锚标记将我的图像制作成链接，但这样做似乎忽略了我以前为图像使用的样式，我不知道为什么。 简而言之：为什么添加这个元素会改变整个风格？

.slider 使所有图像保持一致且大小相同，而 .slider>img 保持每个 img 的圆形。 出于某种原因，我认为添加锚元素会破坏 .slider>img 样式。

有没有一种方法可以在允许图像包含链接的同时保持所有内容的布局相同？

 /* Element */ *, *::after, *::before{ box-sizing: border-box; } /* Variable */ :root{ --handle-size: 3rem; --img-gap: .25rem; } .body{ margin: 0; } .container{ display: flex; justify-content: center; overflow: hidden; } .slider{ --items-per-screen: 4; --slider-index: 0; display: flex; flex-grow: 1; margin: 0 var(--img-gap); transform: translateX(calc(var(--slider-index) * -100%)); transition: transform 500ms ease-in-out; } .slider > img { flex: 0 0 calc(100% / var(--items-per-screen)); max-width: calc(100% / var(--items-per-screen)); aspect-ratio: 16 / 9; padding: var(--img-gap); border-radius: 1rem; }

 <div class = "container"> <button class = "handle left-handle"> <div class="text">&#8249;</div> </button> <div class = "slider"> <img src="Icons/schitts.jpg" stlye="container" alt = "Schitts Creek"> <img src="Icons/familyguy.jpg" alt = "Family Guy"> <img src="Icons/gameofthrones.jpg" alt = "Game Of Thrones"> <img src="Icons/sopranos.jpg" alt = "The Sopranos"> <img src="Icons/southpark.jpg" alt = "South Park"> <img src="Icons/prisonbreak.jpg" alt = "Prison Break"> <img src="Icons/curbyourenthusiasm.jpg" alt = "Curb Your Enthusiasm"> <img src="Icons/americandad.jpg" alt = "American Dad"> <img src="Icons/sinister.jpg" alt = "Sinister"> <img src="Icons/superbad.jpg" alt = "Superbad"> <img src="Icons/hangover.jpg" alt = "The Hangover"> <img src="Icons/midsommar.jpg" alt = "Midsommar"> </div> <button class = "handle right-handle"> <div class="text">&#8250;</div> </button> </div>

没有锚元素

在第一张图片周围使用锚元素

 <div class = "container"> <button class = "handle left-handle"> <div class="text">&#8249;</div> </button> <div class = "slider"> <a href="https://www.netflix.com/ca/title/80036165"> <img src="Icons/schitts.jpg" stlye="container" alt = "Schitts Creek"> </a> <img src="Icons/familyguy.jpg" alt = "Family Guy"> <img src="Icons/gameofthrones.jpg" alt = "Game Of Thrones"> <img src="Icons/sopranos.jpg" alt = "The Sopranos"> <img src="Icons/southpark.jpg" alt = "South Park"> <img src="Icons/prisonbreak.jpg" alt = "Prison Break"> <img src="Icons/curbyourenthusiasm.jpg" alt = "Curb Your Enthusiasm"> <img src="Icons/americandad.jpg" alt = "American Dad"> <img src="Icons/sinister.jpg" alt = "Sinister"> <img src="Icons/superbad.jpg" alt = "Superbad"> <img src="Icons/hangover.jpg" alt = "The Hangover"> <img src="Icons/midsommar.jpg" alt = "Midsommar"> </div> <button class = "handle right-handle"> <div class="text">&#8250;</div> </button> </div>

Answer 1

弄清楚了

 function link(Link){ window.location.href = Link; }

 <img src="Icons/schitts.jpg" onclick="link('https://www.netflix.com/browse')" stlye="container" alt = "Schitts Creek">