將鼠標懸停在圓圈上時顯示文字

Question

將鼠標懸停在圓圈下方時，我需要在圓圈下方添加文字。 我必須使用html，css和javascript。 我對javascript不太滿意，所以我知道這就是問題所在。 任何幫助將不勝感激，如果有更簡單的方法來做javascript代碼也將是一件好事！

這是我的html代碼：

<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script type="text/javascript" src="main.js"></script>
</head>
    <body>

<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p> 
<p>And blow them all your way.</p>
    <div data-bind="event: { mouseover: EnableDetails, mouseout: DisableDetails   
}"></div>
<p data-bind="visible: DetailsViewable(), text: AuthorName"></p>         
</body>
</html>

這是我的CSS代碼

div {
display: inline-block;
margin-left: 5px;
height: 100px;
    width: 100px;
    border-radius: 100%;
    border:2px solid black;
    background-color: black;
    }

這是我的JavaScript代碼：

var ViewModel = function() {
var self = this;
self.AuthorFirstName = ko.observable("Joe");
self.AuthorLastName = ko.observable("Blow");
self.AuthorName = ko.computed(function(){
    return self.AuthorFirstName() + " " + self.AuthorLastName();
});
self.DetailsViewable = ko.observable(false);
self.EnableDetails = function() {
    self.DetailsViewable(true);
};
self.DisableDetails = function() {
    self.DetailsViewable(false);
};
};

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

Answer 1

您可以使用CSS完成所有操作。

http://jsfiddle.net/hzpKu/

div {
display: inline-block;
margin-left: 5px;
height: 100px;
    width: 100px;
    border-radius: 100%;
    border:2px solid black;
    background-color: black;
    }

div:hover + p {
    display:block;
}

p {
    display:none; 
}

Answer 2

為什么不嘗試使用Jquery？ 它更容易。 http://jquery.com （只需下載插件並放在標題中）

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
display: inline-block;
margin-left: 5px;
height: 100px;
    width: 100px;
    border-radius: 100%;
    border:2px solid black;
    background-color: black;
    }
</style>
</head>
<body>

<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p> 
<p>And blow them all your way.</p>
    <div id="circle"></div>
<p id="circle_text"></p>

<script>
$( "#circle" ).hover(function() {
    $("#circle_text").text("Joe Blow");
  }, function() {
    $("#circle_text").text( "" );
  });
</script>         
</body>
</html>

Answer 3

您也可以嘗試一些類似的jquery ...
現場演示

<div id="circle"></div>
<div id="text">
   ...
</div>

$('#circle').on('mouseenter', function () {
   $('#text').show("slow");
});
   $('#circle').on('mouseout', function () {
   $('#text').hide("slow");
});

更新：
或者您也可以使用hover和toggle以更少的代碼完成代碼

$('#circle').hover( function () {
  $('#text').toggle("slow");
});

現場演示2

將鼠標懸停在圓圈上時顯示文字

問題描述

3 個解決方案

解決方案1
4 2014-06-10 18:54:45

解決方案2
0 2014-06-10 19:02:29

解決方案3
0 2014-06-10 19:22:19

將鼠標懸停在圓圈上時顯示文字

問題描述

3 個解決方案

解決方案1 4 2014-06-10 18:54:45

解決方案2 0 2014-06-10 19:02:29

解決方案3 0 2014-06-10 19:22:19

解決方案1
4 2014-06-10 18:54:45

解決方案2
0 2014-06-10 19:02:29

解決方案3
0 2014-06-10 19:22:19