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尝试这样的东西......
Live Demo

<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");
});

Live Demo 2

悬停在圆圈上时，在圆圈下显示文字

3 个答案: