Question

我有一个圆形div，我想填写一张图片＆amp;使用鼠标指针将整个图像/ div可点击（href）更改为手型光标

我查了几个例子＆amp;尝试下面没有将图像加载到div中。我还想在悬停时缩小图像。

我怎样才能实现这个pelase？

<div class="circleDiv">
    <a href='#'></a>
</div>

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.circleDiv a{
  background: url("path_to_image") no-repeat right center;
}

Answer 1

您可以使用以下命令使整个DIV可点击（不是其中的元素）：

<div class="circleDiv" role="button" onClick="location.href='stackoverflow.com'">

将此CSS添加到div类（只是为了更改鼠标指针）：

cursor: pointer;

Answer 2

您可以使用background-size，background-position，display和:hover伪类来实现您的目标，这里是相同https://jsfiddle.net/bhfr0t1m/3/

我希望这正是你想要的

更新：

如果您希望方形图像为圆形，则可以使用以下代码

.circleDiv{
  position: relative;
  background-color: #09f;
  margin: 30px 70px 30px 70px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow:hidden;
}

.circleDiv a img{
  border-radius: 50%;
   transform: translate(50%,50%);
   height: 50%;
    width: 50%;
    display: block;
}

.circleDiv a img:hover{
    height: 100%;
    width: 100%;
    transform: translate(0,0);
   
  }

<div class="circleDiv">
    <a href='#'><span><img src="http://s27.postimg.org/6ndnxsbqr/index.jpg"/></span></a>
</div>

Answer 3

只需将以下内容添加到.circleDiv a

即可

.circleDiv a{
  ...

  display: block;
  height: 100%;
  width: 100%;
}

Fiddle

Answer 4

试试这个：

<a href='https://www.google.fr/'>
   <div class="circleDiv">
   </div>
</a>

.circleDiv{
   position: relative;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   background: url("path_to_image") no-repeat right center;
   cursor: pointer;
 }

Answer 5

我已更新your js fiddle

您需要为img添加:hover以及向img或包装器添加边框半径。仅将其添加到包装器还需要将溢出设置为隐藏。

Answer 6

看起来很有趣，也是玩夹子的好时机:)我创造了一个小提琴，但没有太大变化。当你到达圆的边缘时，使用剪辑会阻止奇怪的鼠标指针变化。

.circleDiv {
   position: relative;
   background-color: #09f;
   margin: 30px 70px 30px 70px;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   overflow: hidden;
}

.circleDiv a {
   background: url('https://placeimg.com/500/500/animals') no-repeat center;
  background-size: fill;
  display: block;
  width: 250px;
  height: 250px;
  -webkit-clip-path: circle(125px at center);
  clip-path: circle(125px at center);
}

/* hover style, could be animated */
.circleDiv a:hover {
  background-size: contain;
}

Fiddle link

用image＆amp ;;填充整个div使整个div可点击作为链接

6 个答案: