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

【问题标题】：Responsive round image links with hover effect具有悬停效果的响应式圆形图像链接
【发布时间】：2015-03-20 15:40:24
【问题描述】：

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

我可以：

使用 HTML/JS/Jquery/Bootstrap/CSS 来实现这一点

图片：

圆形，有空白/透明角
鼠标悬停时切换到另一个相似的图像，鼠标离开时切换回来
页面上不止一个
当我点击它们时让我去别的地方
应该是响应式的，上面列出的效果也应该如此

我一整天都在自己尝试，但我仍然有问题；这是我的代码：

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（截图）

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

任何帮助将不胜感激，对于格式非常糟糕的帖子感到抱歉。

非常喜欢。

【问题讨论】：

标签： jquery image hover geometry

【解决方案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

【讨论】：

哇，这样的技能，我会在周末享受我的周末，同时尝试理解你所有有趣的 CSS。非常非常感谢你。我没有足够的声誉来支持您的回答，对此感到抱歉！米歇尔。