标签: pure-css

CSS：悬停目标而不是点击

我有一个滑块，效果很好。但是，我有一个小问题。当我将鼠标悬停在其中一个<li>s 上时，我想更改滑块图像，而不是单击它们时。

这可能吗？我找到了这个链接，但也许已经有一些新的样式可用？

.slide {
  position: absolute;
  display: none;
  left: -150;
}

.next {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
}

.prev {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
}

.slider .slide:target {
  transition: 1s;
  left: 0;
  z-index: 999;
  display: block;
}

ul {
  padding-top: 250px
}

ul li:hover>a:target {
  left: 0;
  transition: 1s;
  z-index: 9999;
}

Run Code Online (Sandbox Code Playgroud)

<div class='slider'>
  <div class='slide' id="slide1" …

Run Code Online (Sandbox Code Playgroud)

html css pure-css

Ref*_*lon

2020 04-01

5
推荐指数

1
解决办法

174
查看次数

如何仅使用纯 CSS 来制作编辑图标样式？

我想使用纯 CSS 来设计上面的图像。

到目前为止，我只能在没有编辑图标的情况下进行设计。

以下是我迄今为止提出的 HTML 和 CSS：

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

Run Code Online (Sandbox Code Playgroud)

我只需要右上角编辑图标的 HTML 和 CSS 代码。

html css pure-css

Kei*_*h M

2021 02-11

5
推荐指数

1
解决办法

1万
查看次数