具有悬停效果的响应式圆形图像链接

Question

我需要在网站上有多个圆形的可点击响应图像。

我可以:

使用HTML/JS/Jquery/Bootstrap/CSS实现这个

图像：

圆blank/transparent角
鼠标悬停时变为另一张相似图片，鼠标离开时变回原图
页面不止一个
点击它们让我去别的地方
应该是响应式的，上面列出的效果也应该是响应式的

我自己试了一整天，还是有问题；这是我的代码：

https://jsfiddle.net/83t58rbm/2 (JsFiddle)

由于我在网站上没有任何信誉，这里是一个拙劣的URL，下面的代码也是如此，请参考JsFiddle：

https://jsfiddle.net/83t58rbm/2/embedded/result（全屏）

$(document).ready(function() {

  $("area[title='area_enfance']").mouseover(function() {
    $('img[name=enfance]').attr('src', $('img[name=enfance]').attr('data-active'));
  });
  $("area[title='area_intimite']").mouseover(function() {
    $('img[name=intimite]').attr('src', $('img[name=intimite]').attr('data-active'));
  });
  $("area[title='area_enfance']").mouseout(function() {
    $('img[name=enfance]').attr('src', $('img[name=enfance]').attr('data-inactive'));
  });
  $("area[title='area_intimite']").mouseout(function() {
    $('img[name=intimite]').attr('src', $('img[name=intimite]').attr('data-inactive'));
  });
});

<body>
  <div class="row">
    <div class="col-md-6">
      <map name="m_intimite">
        <area shape="circle" coords="272,272,272" href="someurl" title="area_intimite">
      </map>
      <img name="intimite" usemap="#m_intimite" src="original-img" class="img-responsive" data-active="new-img" data-inactive="original-img" />
    </div>
    <div class="col-md-6">
      <map name="m_enfance">
        <area shape="circle" coords="272,272,272" href="otherurl" title="area_enfance">
      </map>
      <img name="enfance" usemap="#m_enfance" src="original-img" class="img-responsive" data-active="new-img" data-inactive="original-img" />
    </div>
  </div>
  </script>

  </html>

主要问题：

如果您在计算机浏览器上尽可能地减少全屏结果的宽度，图像会像预期的那样减少一点（也许它应该能够减少更多（？）），但是当然，圆的半径（有mouseover/mouseout jquery效果和url去）不会减少，因为它设置为272,272,272坐标，因此允许任何用户指向他们的鼠标在空白区域，仍然有鼠标悬停效果和 href 活动。

http://imgur.com/FcbnhJO（截图）

正如您在屏幕截图中看到的那样，蓝色圆圈代表与顶部图像不同步的圆圈，因为我在页面加载后尽可能地减小了浏览器宽度。

如有任何帮助，我们将不胜感激，对于格式非常糟糕的问题，我们深表歉意post。

非常喜欢。

Answer 1

我认为你可以简化很多。试试这个。

.circle {
    border-radius: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}
.circle a {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: absolute;
    background-size: cover;
    background-position: center center;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle">
                <a href="#" data-active="http://placehold.it/600x600/ff0000/ffffff" data-inactive="http://placehold.it/600x600"></a>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="circle">
                <a href="#" data-active="http://placehold.it/600x600" data-inactive="http://placehold.it/600x600/ff0000/ffffff"></a>
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {
    $('.circle a').each(function () {
        var activeImg = $(this).data('active'),
            inactiveImg = $(this).data('inactive');

        $(this).css('background-image', 'url(' + inactiveImg + ')')
        .mouseover(function () {
            $(this).css('background-image', 'url(' + activeImg + ')')
        })
        .mouseout(function () {
            $(this).css('background-image', 'url(' + inactiveImg + ')');
        });
    });
});

Demo

具有悬停效果的响应式圆形图像链接

Responsive round image links with hover effect

jquery

geometry

image

hover