小编Jea*_*nie的帖子

悬停时图像上的部分"X"形状

我需要在悬停时的图像上有一种X形状.但不是整个"X",只是外部的比特.这是我的设计师的图片:

我在这里悬停时有一个漂亮的"X"形状:

#xdiv {
  width: 200px;
  height: 200px;
  border: 1px solid #999;
  background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
  cursor: pointer;
  opacity: .4;
}
#xdiv:hover .xdiv1 {
  height: 200px;
  width: 1px;
  margin-left: 100px;
  background-color: #333;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1;
}
#xdiv:hover .xdiv2 {
  height: 200px;
  width: 1px;
  background-color: #333;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: …

Run Code Online (Sandbox Code Playgroud)

html css hover css3 css-shapes

Jea*_*nie

2017 05-23

4
推荐指数

1
解决办法

431
查看次数