Question

我正在尝试创建一个标题，说明一件事，但是当你将鼠标移到它上面时会说出不同的东西。

例如，如果我有两个绝对定位标题

一个出现在另一个上面，两个都是黑色背景上的白色文字。

现在我想要一个圆圈出现在鼠标光标所在的位置，这样如果你要将它移到＆＃34; Sa＆＃34;例如，你会看到字母＆＃34; Cr＆＃34;通过。有点像手电筒效果，以揭示下面的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

提前致谢！杰西

Answer 1

您可以尝试此示例代码。

Query query = databaseReference.orderByChild("address").equalTo(tvPatientAddress.getText().toString());

                        query.addChildEventListener(new ChildEventListener() {
                            @Override
                            public void onChildAdded(DataSnapshot dataSnapshot, String s) {
                                dataSnapshot.getRef().setValue(null);
                            }

                            @Override
                            public void onChildChanged(DataSnapshot dataSnapshot, String s) {

                            }

                            @Override
                            public void onChildRemoved(DataSnapshot dataSnapshot) {

                            }

                            @Override
                            public void onChildMoved(DataSnapshot dataSnapshot, String s) {

                            }

                            @Override
                            public void onCancelled(DatabaseError databaseError) {

                            }
                        });

Answer 2

请尝试此代码。

＆＃13;

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

＆＃13;

.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}

＆＃13;

<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>

＆＃13;

以下是jsfiddle demo

Answer 3

您可以使用一些JavaScript以及onmouseenter和onmouseleave属性。

执行类似

的操作

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

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

当鼠标越过“Sa”时，调用函数entered()使其成为“Cr”，当鼠标离开时，调用left()来恢复它。

标识change和<span>标记用于标识需要更改的文档部分。

在鼠标悬停时显示不同的标题文本（手电筒效果）

3 个答案: