在鼠標懸停上顯示不同的標題文本（手電筒效果）

我正在嘗試創建一個標題，指出一件事，但當您將鼠標放在它上面時說的內容不同。在鼠標懸停上顯示不同的標題文本（手電筒效果）

因此，舉例來說，如果我有兩個絕對定位的標題

出現一個比其他，兩者的頂配白色文本黑色背景。

現在我想要一個圓形出現在鼠標光標所在的位置，例如，如果要將它移動到「Sa」上，您會看到字母「Cr」出現。有點像手電筒效果來揭示底下的div。

This is what the heading would look like with no mouseover

With the mouse over the "Sa" - the outline is not needed for the effect, it is just there for visualization

提前感謝！ Jesse

來源

2017-10-16 Jesse James Burton

請嘗試此代碼。

$(function(){ 
 
\t $(".outer").mousemove(function(e){ 
 
    \t var outer = $(this); 
 
    \t var cursor = outer.find(".cursor"); 
 
    var inner = outer.find(".inner"); 
 
    
 
    \t var left = e.pageX - outer.offset().left - cursor.outerWidth()/2; 
 
    var top = e.pageY - outer.offset().top - cursor.outerHeight()/2; 
 
    \t 
 
    if (left < 0) { 
 
    \t left = 0; 
 
    } 
 
    if (top < 0) { 
 
    \t top = 0; 
 
    } 
 
    if (left + cursor.outerWidth() > outer.outerWidth()) { 
 
    \t left = outer.outerWidth() - cursor.outerWidth(); 
 
    } 
 
    if (top + cursor.outerHeight() > outer.outerHeight()) { 
 
    \t top = outer.outerHeight() - cursor.outerHeight(); 
 
    } 
 
    
 
    cursor.show().css({left: left, top: top}); 
 
    inner.css({left: -left, top: -top}); 
 
    }).mouseleave(function(){ 
 
    \t $(this).find(".cursor").hide(); 
 
    }); 
 
});

.outer{position: relative;cursor: none;} 
 
.outer, .inner{width: 300px;padding: 20px;font-size: 30px;background: #000;color: #fff;text-align: center;font-style: italic;} 
 
.cursor, .inner{position: absolute;left: 0;top: 0;} 
 
.cursor{width: 50px;height: 50px;overflow: hidden;border-radius: 50%;box-shadow: 0px 0px 10px 2px rgba(255,255,255,0.8);display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    Abcde Fghij 
 
    <div class="cursor"><div class="inner">Klmno Pqrst</div></div> 
 
</div>

這裏是jsfiddle demo

來源

2017-10-23 10:24:05 Sasikumar

看起來不錯.. + 1 –

完美!!!非常感謝！這正是我正在尋找的！很酷的解決方案。 –

您可以試試這個示例代碼。

<body> 
<h3>Welcome</h3> 
</body> 


h3:hover{ 
font-size:150%; 
color: blue; 
} 

h3:hover:before{ 
content:"Hello!"; 
opacity:0.5; 
}

來源

2017-10-16 05:15:07 nish

請提供完整的例子，所以我們可以在現場進行測試。 –

感謝您的回覆，這似乎不起作用，它只是改變文字，並沒有真正透露任何內容。我希望能夠實現的是在頂部div中切出一個圓形，以揭示底部底部div上的文本，如果這樣做有道理的話？理想情況下，它也會動畫一點，就好像鼠標以某種方式清除頂部div（但這只是一個理想）。 –

我猜想另一種方法是將頂部div隱藏起來，然後在任何鼠標的任何地方顯示一圈。也許這會更容易？ –

你可以使用一些JavaScript和onmouseenter和onmouseleave屬性。

這樣做

function entered(){ 
 
\t document.getElementById("change").innerHTML="Cr"; 
 
} 
 
function left(){ 
 
\t document.getElementById("change").innerHTML="Sa"; 
 
}

<body> 
 
\t <span id="change" onmouseenter="entered()" onmouseleave="left()">Sa</span>cred spaces 
 
</body>

當鼠標過來的「SA」，該功能entered()被調用，以使其「鉻」，當鼠標離開它left()被稱爲恢復它。

ID change和<span>標記用於標識需要更改的文檔部分。

來源

2017-10-16 06:36:52

感謝您的回覆，這確實是一個有趣的解決方案，我可以充分利用它，因爲它可以作爲短期解決方案。我希望能達到的目標是如果有意義的話，可以在文檔中刪除文字以顯示下面的文字。理想情況下，它也會動畫一點，就好像鼠標以某種方式清除頂部div（但這只是一個理想）。 –

在鼠標懸停上顯示不同的標題文本（手電筒效果）

回答

相關問題