Question

我搜索了这个主题，虽然我发现了类似的情况，但我无法将其应用于我的特定需求。我有一个wordpress网站的插件，它使我能够在链接悬停上显示图像作为工具提示。它工作得很好，我遇到的唯一问题是我希望每个图像工具提示在页面上都有一个固定的位置，不管鼠标悬停位置如何都不会改变。现在，工具提示在我选择的任何链接上跟随鼠标。作为参考，我尝试它的功能就像这个网站上的悬停图像：http://www.themorrisongallery.com/artists.html其中有一个静止的固定位置，显示鼠标悬停时的图像。

这是我正在使用的插件：http://smartcatdesign.net/wp-tooltip-with-images-free-wordpress-plugin/

这是CSS目前的样子：

.sc-tooltip-wrapper{
width: auto;
height: auto;
float: right;
margin: 0px;
background: #ffffff;
color: #333333;
z-index: 9999;
display: none;
overflow: hidden;
position: absolute;
top: -50px;



.sc-tooltip-wrapper img{
float: right;
width: auto;
height: auto;
position: relative;

以下是脚本的样子：

jQuery(document).ready(function($) {
var ctr = 0;
$('.sc-tooltip').each(function() {

    ctr++;
    var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>';
    $('body').append(tooltips);
    $(this).attr('id', 'sc-tooltip' + ctr);
});
$('.sc-tooltip').hover(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var theId = '#' + $(this).attr('id') + '-box';
    var leftOfset = $(theId).width();
    $(theId).css({'left': x, 'top': y});
    $(theId).fadeIn(200);
}, function() {
    var theId = '#' + $(this).attr('id') + '-box';
    $(theId).fadeOut(100);
});

任何建议都将非常感谢！我一直在尝试使用css并使用'top'和'left'属性来设置固定位置，但每次我这样做时，图像都会完全从页面中消失。

Answer 1

您实际上并不想获取图片position: fixed，然后它不会随页面滚动...

试试这个CSS：

.sc-tooltip-wrapper{
    width: auto;
    height: auto;
    float: right;
    margin: 0px;
    background: #ffffff;
    color: #333333;
    z-index: 9999;
    display: none;
    overflow: hidden;
    position: absolute;
    top: 100px; /* Set the position you want here */
    left: 100px; /* Set the position you want here */
}

.sc-tooltip-wrapper img{
    float: right;
    width: auto;
    height: auto;
    position: relative;
}

这个javascript：

jQuery(document).ready(function($) {
var ctr = 0;
$('.sc-tooltip').each(function() {

    ctr++;
    var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>';
    $('body').append(tooltips);
    $(this).attr('id', 'sc-tooltip' + ctr);
});
$('.sc-tooltip').hover(function(e) {
    //var x = e.pageX;
    //var y = e.pageY;
    //var theId = '#' + $(this).attr('id') + '-box';
    //var leftOfset = $(theId).width();
    //$(theId).css({'left': x, 'top': y});
    //$(theId).fadeIn(200); // Nice effect...
    $(theId).show(); // But this makes it more like your example
}, function() {
    var theId = '#' + $(this).attr('id') + '-box';
    //$(theId).fadeOut(100); // Nice effect...
    $(theId).hide(); // But this makes it more like your example
});

我所做的就是在你悬停链接时简单地停止javascript更新图像位置。它保持在CSS中设置的位置。

此外，将$(theId).fadeIn(100);更改为$(theId).show();，将$(theId).fadeOut(100);更改为$(theId).hide();，以使行为更像您链接的示例中的行为。我猜想原版会更平滑，更柔和，更好，只是想给你选择！

工具提示图像设置固定位置

1 个答案: