Question

我有一张图片，当我将鼠标悬停在图片上时，我想让文字显示在屏幕上的其他位置。我发现许多解决方案使文本出现在图像上，但不会出现在页面上的其他位置。有什么想法吗？

以下是我正在尝试的内容： HTML：

<div class="dan-profile-picture"></div>
blah blah blah
<div class="dan-profile">lots of text</div>

CSS：

div.dan-profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    background: url(./images/dan.jpg) no-repeat;
    border:3px solid black;
}
div.dan-profile {
    display:none;
}
div.dan-profile-picture:hover {
    opacity:0.5;
}
div.dan-profile-picture:hover + div.dan-profile {
    display:block;
}

Answer 1

让dan-profile成为dan-profile-picture的孩子

.dan-profile-picture{
position:relative;

}

.dan-profile{
position:absolute;
right: -30px /* whichever value you desire */
top: -30px /*whichever value you desire */
display:none;
}

.dan-profile-picture:hover .dan-profile{
display:block;
}

希望这会有所帮助

Answer 2

这应该可以解决问题。

div.dan-profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    background: url(./images/dan.jpg) no-repeat;
    border:3px solid black;
}
.dan-profile-picture:hover {
    opacity:0.5;
}

.dan-profile{display:none;}
.dan-profile-picture:hover + .dan-profile{display:block;}

<强> Fiddle

请记住，使用+选择器时，元素必须是直接的下一个元素。如果中间有元素，则此选择器将无效，您将不得不使用javascript。

See this page for more info on css selectors

该列表的第7号是我用于您的用户案例的

“这被称为相邻选择器。它将仅选择前一个元素前面的元素。”

Answer 3

如果您更喜欢jQuery：

 $('.dan-profile-picture').hover(function () {

        var posx = Math.floor(Math.random() * $("body").width());
        var posy = Math.floor(Math.random() * $("body").height());
        $('.dan-profile').css({
            'position': 'absolute',
                'left': posx + 'px',
                'top': posy + 'px',
                'display': 'block'
        });
    });

Fiddle Demo

<强>更新

隐藏div，你可以使用现有jQuery中的回调函数 - ，如user3008011的评论中所述

$('.dan-profile-picture').hover(function () {

        var posx = Math.floor(Math.random() * $("body").width());
        var posy = Math.floor(Math.random() * $("body").height());
        $('.dan-profile').css({
            'position': 'absolute',
                'left': posx + 'px',
                'top': posy + 'px',
                'display': 'block'
        });
    },function(){                  //this is call back function
        console.log('out');        //will be triggered when main 
        $('.dan-profile').hide();  //function completes
    });

demo

第二种方式 - ，因为您不熟悉jQuery - 即使在hide上也可以触发mouseout

 $('.dan-profile-picture').mouseout(function () {
        $('.dan-profile').css({
            'display': 'none'
        });
    });

demo

在悬停时将文本显示在其他位置

3 个答案: