Question

我有这个图像，我想在此图像的选定区域上添加鼠标悬停在文本上。

例如，如果您查看此图像并将鼠标悬停在字母A上，我想在框中添加一个小描述。怎么做？

有人可以帮忙。

感谢

Answer 1

如何使用纯CSS实现这一点，我只是使用CSS定位在三角形的边缘正确设置圆，而不是使用content: attr()属性，其中调用我声明的自定义属性是data-title，所以全部，休息是自我解释的。

Demo

Demo 2 （2点）

<强> HTML

<div>
    <img src="http://wilsonsch3u-01-2012.wikispaces.com/file/view/triangle.png" alt="" />
    <span data-title="This is a custom title"></span>
</div>

<强> CSS

div {
    width: 200px;
    position: relative;
}

div img {
    max-width: 100%;
}

div span {
    height: 20px;
    width: 20px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    bottom: 25px;
    z-index: 1;
}

span:hover:after {
    content: attr(data-title);
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 13px;
    font-family: Arial;
    width: 200px;
    top: 15px;
    padding: 10px;
    position: absolute;
}

注意：您也可以使用background-image代替img

来实现此目的

Answer 2

以下是我的问题解决方案。 DEMO（显示如何使用2分）

它涉及一个相对定位的div，以您的图像为背景。然后有一些绝对定位的“悬停点”触发工具提示。

一旦你开始工作，你可以删除红色边框并设置工具提示的样式，但是你喜欢。

<强> HTML

<div id="image">
    <div class="hoverPoint" style="top:312px;left:178px;" data-content="This is a test (A)"></div>
    <div class="hoverPoint" style="top:37px;left:379px;" data-content="This is a test (C)"></div>
    <div id="tooltip"></div>    
</div>

<强>的jQuery

$('.hoverPoint').mouseenter(function(){
    $('#tooltip')
        .css({
            top: ($(this).position().top-30) + 'px',
            left: $(this).position().left + 'px'
         })
         .html( $(this).data('content') )
         .show();
}).mouseleave(function(){
    $('#tooltip')
        .html('')
        .hide();
});

<强> CSS

#image{
    background:url(http://oi44.tinypic.com/2ur9to5.jpg) no-repeat;
    width:888px;
    height:441px;
    position:relative;
}
#tooltip{
    position:absolute;  
    background:#fff;
    border:1px solid #999;
    padding:4px;
    display:none;
}
.hoverPoint{
    position:absolute;
    width:47px;
    height:47px;
    border:1px solid #f00;
    cursor:pointer;
}

Answer 3

使用：hover选择器

的CSS：

.divWithMessage:hover > .message {
    display: block
}

HTML：

<div class="divWithMessage">
    A
    <div class="message">This is a message. Use CSS to position it.</div>
</div>

Answer 4

我知道这样做的独特方式是映射每个区域的点有点麻烦。例如，你可以想象一个约束lecter A的矩形。如果图像上的moouse进入这个范围，你可以在这个位置附加一个DOM元素或做一些东西。

例如，您可以想象这个解决方案：

var zona1X = new Array(400, 438, 438, 394);
var zona1Y = new Array(305, 355, 284, 280);

var zona2X = new Array(450, 580, 580, 450);
var zona2Y = new Array(360, 500, 270, 270);

var zona3X = new Array(360, 370, 430, 400);
var zona3Y = new Array(320, 390, 360, 320);

然后

$('.yourElement').mousemove(function (e) {
    var height = 545; //yourElementHeight
    var x = e.offsetX;
    var y = height - e.offsetY;
    var isHover = false;

    x += ($(e.srcElement).offset().left - $(this).offset().left);
    y += ($(this).offset().top - $(e.srcElement).offset().top);


    if (pnpoly(zona1X.length, zona1X, zona1Y, x, y) && !isHover) {
        //Do some stuff!
    }

    if (pnpoly(zona2X.length, zona2X, zona2Y, x, y) && !isHover) {
        //Do some stuff!
    }

    //etc...

    if (isHover) {
        $(this).css('cursor', 'pointer');
    } else {
        $(this).css('cursor', 'auto');
    }
});

这是插值点的函数：

function pnpoly(nvert, vertx, verty, testx, testy) {
    var i, j, c = false;
    for (i = 0, j = nvert - 1; i < nvert; j = i++) {
        if (((verty[i] > testy) != (verty[j] > testy)) &&
        (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i])) {
            c = !c;
        }
    }
    return c;
}

如何在图像的选定区域上添加鼠标悬停在文本上？

4 个答案: