代碼中的CSS修改

Question

我很抱歉，這聽起來有點愚蠢，但沒有其他人來解決我的查詢，這就是爲什麼我在這裏問它。

我寫了下面的代碼，當我將鼠標懸停在移動的文本字幕上時，它顯示了工具提示。但是目前問題在於工具提示在左側位置處於相對位置下方。不過，我希望它不同，工具提示應該出現在我懸停文本的位置上方。有人可以修改我的CSS嗎？

<!-- CSS Part Start --> 
<style type="text/css"> 
#NT_copy { 
background-color: #333333; 
color: #FFFFFF; 
font-weight: bold; 
font-size: 13px; 
font-family: "Trebuchet MS"; 
width: 300px; 
left: 10px; 
top: 20px; 
padding: 4px; 
position: relative; 
text-align: left; 
z-index: 20; 
-moz-border-radius: 0 10px 10px 10px; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=87); 
-moz-opacity: .87; 
-khtml-opacity: .87; 
opacity: .87; 
} 
</style> 
<!-- CSS Part End --> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery.fn.tooltip= function(options) { 
    this.each(function(){ 
    var settings = { 
     tooltipcontentclass:"searchTipcontent", 
     width:200, 
     position:"absolute", 
     zindex:100 
    }; 
    if(options) { 
     jQuery.extend(settings, options); 
    } 
    jQuery(this).children("."+settings.tooltipcontentclass).hide(); 
    jQuery(this).hover(function() { 
     var de = document.documentElement; 
     var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth; 
     var hasArea = w - jQuery.fn.getAbsoluteLeftObject(this); 
     var clickElementy = jQuery.fn.getAbsoluteTopObject(this) - 3; //set y position 
     var title="&nbsp;"; 
     jQuery("body").append("<div id='NT'><div id='NT_copy'><div >"+jQuery(this).children("."+settings.tooltipcontentclass).html()+"</div></div></div>");//right side 
     var arrowOffset = this.offsetWidth + 11; 
     var clickElementx = jQuery.fn.getAbsoluteLeftObject(this) + arrowOffset; 
     jQuery('#NT').css({left: clickElementx+"px", top: clickElementy+"px"}); 
     jQuery('#NT').css({width: settings.width+"px"}); 
     jQuery('#NT').css({position: settings.postion}); 
     jQuery('#NT').css("z-index",settings.zindex); 
     jQuery('#NT').show(); 
    } , 
    function() { 
     jQuery("#NT").remove(); 
    }) 

    }); 
} 
jQuery.fn.getAbsoluteLeftObject=function(o) { 
    // Get an object left position from the upper left viewport corner 
    oLeft = o.offsetLeft   // Get left position from the parent object 
    while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element 
    oParent = o.offsetParent // Get parent object reference 
    oLeft += oParent.offsetLeft // Add parent left position 
    o = oParent 
    } 
    return oLeft 
} 

jQuery.fn.getAbsoluteTopObject=function (o) { 
    // Get an object top position from the upper left viewport corner 
    oTop = o.offsetTop   // Get top position from the parent object 
    while(o.offsetParent!=null) { // Parse the parent hierarchy up to the document element 
    oParent = o.offsetParent // Get parent object reference 
    oTop += oParent.offsetTop // Add parent top position 
    o = oParent 
    } 
    return oTop 
} 
</script> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

<div id="fixedfooter"> 
<marquee class="smooth_m" behavior="scroll" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"> 
<div id="demo"> 
    <span style="color: #ff0000;" class="formInfo"> 
    <div class="mycontent" style="color: #000000;display:none;"> 
     test Successful for HTML Tooltip on marquee 
    </div> 
    <a href="#"></a>Testing HTML Tooltip on marquee using jQuery and css</span> 
</div> 
</marquee> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".formInfo").tooltip({ 
     tooltipcontentclass: "mycontent" 
    }) 
});; 
</script> 

Answer 1

很多時候，當你陷入困境時，把事情放在一邊，重新開始，即使它只是一個練習。你必須清理你的思想，最好是簡單地開始。

我創建了一個非常簡單的工具提示功能，它的工作方式我相信你很想。請注意，我只包含演示所需的內容，所以請注意，除了marquee中的紅色文本外，它完全沒有風格。另請注意，position函數需要考慮頁面的寬度和工具提示的寬度，因此它不會「滾動離屏」。儘管如此，我會讓你把這件事作爲一個練習來解決。

HTML

我搬到了marquee的this.start()和this.stop()到mousemove處理程序。此外，我已將#tooltip元素置於body中，因爲它在body元素的上下文中需要爲position: absolute，而不是在進一步向下嵌套的另一元素中。

<div id="fixedfooter"> 
    <marquee behavior="scroll" direction="left" scrollamount="3"> 
     <span id="marquee-text"> 
      Testing HTML Tooltip on marquee using jQuery and css 
     </span> 
    </marquee> 
</div> 
<div id="tooltip"> 
    Successful for HTML Tooltip on marquee 
</div> 

CSS

#fixedfooter { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    color: #ff0000; 
} 
#marquee-text { 
    cursor: pointer; 
} 
#tooltip { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

的Javascript

的var $tooltip = $('#tooltip')和下面一行是jQuery的緩存。如果你反覆訪問一個元素，總是嘗試緩存它的引用，而不是一遍又一遍地從jQuery選擇器中調用它;這是一個很大的性能問題。

jQuery(document).ready(function($){ 
    var $tooltip = $('#tooltip'), 
     $marquee = $('#marquee-text'); 

    var show = function(e){ 
     $marquee.parent('marquee')[0].stop(); 
     position.call(this, e); 
     $tooltip.show(); 
    }; 

    var hide = function(e){ 
     $marquee.parent('marquee')[0].start(); 
     $tooltip.hide(); 
    }; 

    var position = function(e){ 
     $tooltip.css({top: e.pageY + 20, left: e.pageX + 20}); 
    }; 

    $marquee 
     .hover(show, hide) 
     .mousemove(position); 
}); 

http://jsfiddle.net/6jTd6/