小编Sti*_*ers的帖子

从中心显示背景图片

我正在研究具有悬停效果的圆形化身，默认情况下，背景图片上方有一个半透明的叠加层，它可以显示悬停时的图片。

问题是，悬停时是否有可能使叠加层从框的中心消失？现在恰恰相反。

.avatar {
  position: relative;
  background: url("https://i.stack.imgur.com/zBjxW.jpg") center / cover no-repeat;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.avatar:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0, 0, 255, .5);
  transition: width .5s, height .5s;
}

.avatar:hover:before {
  width: 0;
  height: 0;
}

Run Code Online (Sandbox Code Playgroud)

<div class="avatar"></div>

Run Code Online (Sandbox Code Playgroud)

css css3 css-transitions

Sti*_*ers

2017 11-19

0
推荐指数

1
解决办法

112
查看次数

带有多行文本的垂直对齐图标

我有以下 CSS：

.dropdown section h4::after {
    content: url(img/plus-symbol.svg);
    right: 0;
    vertical-align: middle;
    position: absolute;
    display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

有人能给我一些关于如何将“+”图标带到最后一项的中间的提示吗？

html css

Ash*_*ish

2017 12-28

0
推荐指数

1
解决办法

1339
查看次数

伪元素：父div的border-radius之前

我有一个 div，当你将其悬停时，颜色会通过改变元素的宽度而改变:before。问题是 div 有弯曲边框，而:before元素没有。

如何使:before元素不绘制在 div 的边框上？

.btn {
  position: relative;
  z-index: 0;
  background-color: grey;
  border: 2px solid black;
  width: 280px;
  height: 100px;
  border-radius: 40px;
  text-align: center;
}

.btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0);
  transition: 1s;
}

.btn:hover:before {
  transform: scaleY(1);
  background-color: blue;
}

Run Code Online (Sandbox Code Playgroud)

<div class="btn">
  Hover me and look to the sides
</div>

Run Code Online (Sandbox Code Playgroud)

html css pseudo-element

Poo*_*ogy

2018 03-21

0
推荐指数

1
解决办法

1278
查看次数

为什么click函数在jQuery中不起作用？

当我点击div或类"c"时,我正在尝试做某事,但似乎它不起作用.有什么建议我怎么解决它？

<html>

    <head>
        <title>My seconf jQuery practice</title>
        <style>
            .c {
                width: 100px;
                height:100px;
                border-radius: 50px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="c"></div>
        <p>My text
            <script "type=text/javascript" src="jquery-min.js">
                $(".c").click(function() {
                    //$("p").html("my text has changed");
                    alert('hi');
                });
            </script>
    </body>

</html>

Run Code Online (Sandbox Code Playgroud)

jquery click

作者

2015 10-08

-1
推荐指数

1
解决办法

48
查看次数