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

Question

我需要在悬停时的图像上有一种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: 2;
}

<div id="xdiv">
  <div class="xdiv1">
    <div class="xdiv2"></div>
  </div>
</div>

我从这个答案修改了.

按照我的设计师的例子,这是否可以使用CSS而不是在悬停时使用其他图像？

Answer 1

编辑:

您可以使用以下方式实现部分X形状:

• 2个伪元素而不是div来减少标记
• 顶部/底部边框,没有背景,因此形状的中间部分是透明的

DEMO

注意:您还应该在前缀后声明非前缀属性(在您的代码段中转换)

#xdiv {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #999;
  background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
  cursor: pointer;
  opacity: .4;
}
#xdiv:before, #xdiv:after {
  content: '';
  position: absolute;
  display: none;
  left: 50%; top: 0;
  width: 1px; height: 100px;
  border-top: 50px solid #333;
  border-bottom: 50px solid #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#xdiv:hover:before {
  display: block;
}
#xdiv:hover:after {
  display: block;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div id="xdiv"></div>

上一个答案:

DEMO

#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: 100px;
    width: 1px;
    margin-left: 100px;
    border-top: 50px solid #333;
    border-bottom: 50px solid #333;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    z-index: 1;
}
#xdiv:hover .xdiv2 {
    position:relative;
    top:-50px;
    height: 100px;
    width: 1px;
    border-top: 50px solid #333;
    border-bottom: 50px solid #333;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    z-index: 2;
}

<div id="xdiv" >
<div class="xdiv1">
    <div class="xdiv2"></div>
</div>
</div>