首页 \ 问答 \ 使用jquery悬停时显示文本(display text when hovering with jquery)

使用jquery悬停时显示文本(display text when hovering with jquery)

 我是jquery的新手，并且在将鼠标悬停在div上时尝试显示文本。 我现在有一个基本的html页面，带有几个正方形，其中一个正在单击按钮时旋转。 现在，在同一个方块（div2）中，我希望将鼠标悬停在此上时显示一些文本。  
 这是我的HTML  
<!DOCTYPE html>
<html>
<head>
<LINK href="divtest.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src=divtest.js></script>
</head>
<body>
<div id="border">
<div id="div1">
<div id="div2">
</div> 
</div>
</div>
<input type="button" value="button" onclick="rotate()" />

<script>
$("id=div2").hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});
</script>

</body>
</html>
 
 我如何确定我想要的文字“HOVERING !!!” 在div2上显示。  
 这是CSS  
#border{
position:relative;
border-style:solid;
border-width:5px;
border-color:black;
width:1366;
height:768
}

#div1{
position:relative;
background-color: blue;
display:block;
height:500px;
width:500px;
left:350px;
}

#div2{
position:relative;
background-color: green;
display:block;
height:400px;
width:400px;
top:50px;
left:50px;
}
 
 现在我的.js页面  
var obj = "div2";
    var angle = 0;
    var interval = 100;
    increment = 5;

   function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
        angle += increment;
        setTimeout(rotate, interval);
    }

I'm new to jquery and attempting to display text when hovering over a div. I have a basic html page right now with a couple squares, one of which rotates when a button is clicked. Now, in this same square (div2) I'd like for some text to be displayed when hovering over this.  
Here's my HTML 
<!DOCTYPE html>
<html>
<head>
<LINK href="divtest.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src=divtest.js></script>
</head>
<body>
<div id="border">
<div id="div1">
<div id="div2">
</div> 
</div>
</div>
<input type="button" value="button" onclick="rotate()" />

<script>
$("id=div2").hover(
function () {
    $(this).append($("<span> HOVERING!!!!! </span>"));
});
</script>

</body>
</html>
 
How do I identify that I want the text "HOVERING!!!" to be displayed over div2.  
Here's the CSS 
#border{
position:relative;
border-style:solid;
border-width:5px;
border-color:black;
width:1366;
height:768
}

#div1{
position:relative;
background-color: blue;
display:block;
height:500px;
width:500px;
left:350px;
}

#div2{
position:relative;
background-color: green;
display:block;
height:400px;
width:400px;
top:50px;
left:50px;
}
 
And now for my .js page 
var obj = "div2";
    var angle = 0;
    var interval = 100;
    increment = 5;

   function rotate() {
    $('#' + obj).css({
        '-moz-transform': 'rotate(' + angle + 'deg)',
        'msTransform': 'rotate(' + angle + 'deg)',
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)'
    });
        angle += increment;
        setTimeout(rotate, interval);
    }

原文：https://stackoverflow.com/questions/10432481

更新时间：2023-06-15 16:06

最满意答案

 我过去处理这个问题的一种方法是利用一个简单的操作结果类。 基本上你所做的是将你的成功和失败包装在一个对象中，该对象包含操作的状态，它返回的任何数据，以及描述发生的事情的消息。 这是一个样本  
public enum OperationStatus { Success, Failure, Pending }
public class OperationResult<T>
{

    public T Data { get; private set; }
    private OperationStatus opStatus;

    public string Status
    {
        get
        {
            return this.opStatus.ToString();
        }

        private set
        {
            var names = Enum.GetNames(typeof(OperationStatus));
            if (names.Contains(value))
            {
                this.opStatus = (OperationStatus)Enum.Parse(typeof(OperationStatus), value);
            }
            else
            {
                throw new Exception("Illegal Status Type");
            }
        }
    }

    public string Message { get; private set; }

    public bool IsSuccess
    {
        get
        {
            return this.Status == OperationStatus.Success.ToString();
        }
    }

    public OperationResult(OperationStatus status, string message, T data)
    {
        this.Data = data;
        this.Status = status.ToString();
        this.Message = message;
    }

    public static implicit operator bool(OperationResult<T> result)
    {
        return result.IsSuccess;
    }
}
 
 我将向您推荐一篇博文，其中讨论了类似的方法响应技术http://www.appvnext.com/blog/2015/12/10/outcome-basics-part-i 。  
 使用这种技术将为您的提供商提供一种约定，以传达任何异常和成功。 

One way I have handle this in the past is by leveraging a simple operation result class. Essentially what you do is wrap your success and failures in an object that holds the status of the operation, any data it returned, and maybe a message describing what happened. Here's a sample 
public enum OperationStatus { Success, Failure, Pending }
public class OperationResult<T>
{

    public T Data { get; private set; }
    private OperationStatus opStatus;

    public string Status
    {
        get
        {
            return this.opStatus.ToString();
        }

        private set
        {
            var names = Enum.GetNames(typeof(OperationStatus));
            if (names.Contains(value))
            {
                this.opStatus = (OperationStatus)Enum.Parse(typeof(OperationStatus), value);
            }
            else
            {
                throw new Exception("Illegal Status Type");
            }
        }
    }

    public string Message { get; private set; }

    public bool IsSuccess
    {
        get
        {
            return this.Status == OperationStatus.Success.ToString();
        }
    }

    public OperationResult(OperationStatus status, string message, T data)
    {
        this.Data = data;
        this.Status = status.ToString();
        this.Message = message;
    }

    public static implicit operator bool(OperationResult<T> result)
    {
        return result.IsSuccess;
    }
}
 
I'll refer you to a blog post that discusses a similar technique for method responses http://www.appvnext.com/blog/2015/12/10/outcome-basics-part-i.  
Using such a technique will provide a convention for your providers to communicate any exceptions and also successes.

使用jquery悬停时显示文本(display text when hovering with jquery)

最满意答案

相关问答

如何强制执行抽象行为以某种方式(How to enforce implementation of abstract to behave a certain way)[2021-09-10]

在Immutables中强制执行特定的Map实现(Enforce specific Map implementation in Immutables)[2021-05-05]

避免结构中的PhantomData强制执行类型约束(Avoiding PhantomData in a struct to enforce type constraints)[2022-04-01]

为什么AutoMapperExtension的行为与直接实现不同？(Why would an AutoMapperExtension behave differently from a direct implementation?)[2022-03-30]

在抽象类中强制执行方法执行顺序(Enforce method execution order in Abstract Class)[2022-09-12]

强制执行函数调用的顺序？(enforce order of function calls?)[2021-12-21]

在通用方法的实现中强制实现类型安全(Enforce type safety in the implementation of a generic method)[2022-06-22]

name上的抽象属性未强制执行(Abstract Property on name not enforced)[2022-04-30]

Java Abstract Class声明throwable - 实现不会强制执行它？(Java Abstract Class declares throwable - implementation does not enforce it? [duplicate])[2022-02-14]

不能强制使用抽象类的基础构造函数到派生类中(Can't enforce the use of base constructor of an abstract class into derived class)[2023-05-10]

相关文章

最新问答

使用jquery悬停时显示文本(display text when hovering with jquery)

最满意答案

相关问答

如何强制执行抽象行为以某种方式(How to enforce implementation of abstract to behave a certain way)[2021-09-10]

在Immutables中强制执行特定的Map实现(Enforce specific Map implementation in Immutables)[2021-05-05]

避免结构中的PhantomData强制执行类型约束(Avoiding PhantomData in a struct to enforce type constraints)[2022-04-01]

为什么AutoMapperExtension的行为与直接实现不同？(Why would an AutoMapperExtension behave differently from a direct implementation?)[2022-03-30]

在抽象类中强制执行方法执行顺序(Enforce method execution order in Abstract Class)[2022-09-12]

强制执行函数调用的顺序？(enforce order of function calls?)[2021-12-21]

在通用方法的实现中强制实现类型安全(Enforce type safety in the implementation of a generic method)[2022-06-22]

__name__上的抽象属性未强制执行(Abstract Property on __name__ not enforced)[2022-04-30]

Java Abstract Class声明throwable - 实现不会强制执行它？(Java Abstract Class declares throwable - implementation does not enforce it? [duplicate])[2022-02-14]

不能强制使用抽象类的基础构造函数到派生类中(Can't enforce the use of base constructor of an abstract class into derived class)[2023-05-10]

相关文章

最新问答

name上的抽象属性未强制执行(Abstract Property on name not enforced)[2022-04-30]