使用javascript在mouseenter上设置文本的颜色 [英] Set color of a text on mouseenter with javascript
本文介绍了使用javascript在mouseenter上设置文本的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码适用于在链接mouseenter上显示和隐藏div标签，
我的问题是更改所选链接的字体大小和颜色。
（即Lemon，Lime，Bitters）。
the code below works fine for showing and hiding div tag on link mouseenter,
My problem is changing the the font-size and color of the link selected.
(that is Lemon, Lime, Bitters).
<html>
<head>
<title>hide/show </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//add the click event to each element with the toggle class
$('a.toggle').mouseenter(function () {
if ($(document).data("toggle-id")) {
//item was already selected, hide it
$("div.toggle#" + $(document).data("toggle-id")).hide(1);
}
//save the new id for later, then show it
$(document).data("toggle-id", $(this).text().toLowerCase());
$("div.toggle#" + $(document).data("toggle-id")).slideToggle(1000)
});
});
</script>
</head>
<body>
<a href="#" id="1" class="toggle">Lemon</a>
<a href="#" id="2" class="toggle">Lime</a>
<a href="#" id="3" class="toggle">Bitters</a>
<div style="height:300px;">
<div id="lemon" class="toggle" style="width:100%;height:200px;background-color:red; display:none;">Lemons are good<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/WebForm1.aspx">HyperLink</asp:HyperLink></div>
<div id="lime" class="toggle" style="width:400px;height:200px;background-color:green; display:none;">Lime is very bitter</div>
<div id="bitters" class="toggle" style="width:400px;height:200px;background-color:green; display:none;">Bitters not good for your health</div>
</div>
</body>
</html>
推荐答案
（document）.ready（function（）{
//使用toggle类为每个元素添加click事件
(document).ready(function () { //add the click event to each element with the toggle class
（'a .toggle'）。mouseenter（function（）{
if（
('a.toggle').mouseenter(function () { if (
（document）.data（toggle-id））{
// item is已经选中，隐藏它
(document).data("toggle-id")) { //item was already selected, hide it
这篇关于使用javascript在mouseenter上设置文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
