代码之家 › 专栏 › 技术社区 › JoSch

Fancybox 3:为滑块的左侧和右侧设置不同的光标

fancybox-3 fancybox css jquery javascript

JoSch · 技术社区 · 8 年前

现在,我想为滑块的每一侧设置自定义光标;右侧应显示一个指向右侧的箭头,左侧应显示一个指向左侧的箭头。我目前的问题是,我无法为滑块的任一侧设置光标,通常只能为可单击区域设置光标。我如何区分这两个,并为每个设置不同的滑块?

jquery.fancybox.css 我也改变了。显示当前版本的gif(我将可点击区域涂成绿色,以使其更明显):

/* Navigation arrows */

.fancybox-arrow {
  position: absolute;
  top: 0;
  margin: 0 0 0 0;
  height: 100%;
  width: 49%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  background-color: rgba(137, 255, 139, 0.4);
  cursor: pointer;
  z-index: 99995;
  opacity: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity .25s; 
}

.fancybox-arrow:hover {
  cursor: -webkit-image-set(url(Cursor-Right.png) 1x, url(Cursor-Rightx2.png) 2x), pointer;
}

在中。gif您可以看到光标变为指向右侧的箭头,但它应用于滑块的两侧。