gpt4 book ai didi

javascript - 将鼠标悬停在圆圈上时在圆圈下方显示文本

转载 作者:太空宇宙 更新时间:2023-11-03 21:40:06 24 4
gpt4 key购买 nike

当我将鼠标悬停在圆圈上时,我需要在圆圈下方显示文本。我必须使用 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);

最佳答案

您可以使用 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;
}

关于javascript - 将鼠标悬停在圆圈上时在圆圈下方显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24148643/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com