我通过jquery.append将HTML附加到DOM中 - 我的脚本如下(请原谅蹩脚的代码)

myDiv = $("<div class='bottomright' title="+msgID+">"+msgTitle+msgContent+
"</div>").appendTo(document.body).fadeOut(0).slideDown('fast');
shown.push(msgID);

是否有一种不同的方式来解决悬停或追加(因为看着萤火虫,似乎div在那里好了,它们完美地出现)以便我可以使用悬停功能？

当我说我无法使用它时,我的意思是它实际上什么也没做,我写了以下内容并且没有任何反应:

$(".bottomright").hover(function(){
    alert("text")
})

我有这个代码和/**/中的部分有一些bug ...我找不到它...当我删除那部分代码时,它工作正常.

问题

解

$(window).load(function(){
$('#cTop').toggle(
    function(){
        showC();
    },  
    function() {
        hideC();
    }
);

$('#textDownRight').click(function(){
    window.location = 'http://nitidus-consto.kilu.org';
    hideC();
});

    /* The buggy code starts here */
$('.menuCircle').hover(
    function () {
        $(this).animate({
            width: 55%,
            height: 55%
        }, 250);
    },
    function() {
        $(this).animate({
            width: 50%,
            height: 50%
        }, 250);
    });
    /*it ends here*/
});

function hideC(){
$('#c').animate({
    width: 100,
    height: 100,
    'margin-left': '-50px',
    'margin-top': '-50px'
    },500);
$('#cTop').animate({
    'backgroundColor': 'rgb(25,25,25)'
    }, 500);}

function showC(){
$('#c').animate({
    width: 200,
    height: 200,
    'margin-left': '-100px',
    'margin-top': …

我有一个表格列表供我记录,我使用悬停功能将backgroundcolor更改为蓝色.为此,每件事都很好.

不,我添加了一个单击功能,用于将backgroundcolor更改为黄色,但由于某种原因,背景变为蓝色(悬停功能的颜色相同).

我做了一个演示,你可以在这里找到一个更好的例子.

我希望有人可以帮助我,提前谢谢!

我有以下html:

<span id="spanus">
    <a href="#">child1</a>
    <a href="#">child2</a>
    <a href="#">child3</a>
</span>

和css:

span{
    background: gray;
    border: 2px solid #eaeaea;
    display: inline-block;
    margin: 40px;
}

span:hover{
   background: yellow;
   border: 2px solid #fbfbfb; 
}

a{
   padding: 10px;
    display: inline-block;
}

span a:hover{
    color: #fff;
    background: red;
}

小提琴:

我的问题是当我悬停跨度时,我怎样才能将所有3个孩子悬停在跨度上

谢谢.

我有一个hover事件,删除一个小按钮,并在它悬停时用一个完整的菜单栏替换它.

我想做的是,如果鼠标没有悬停在菜单栏(this.element)上5秒钟(每次hover事件发生时计时器重置),则会发生相反的情况.

this.button.on('hover', function(e){

    t.admin_bar.show('slide', { 'direction': t.options.position }, 500);
    t.button.hide('slide', { 'direction': t.options.position }, 500);

});

更新

在迄今为止提供的评论和答案的帮助下,我想出了这个.但是,即使mouseenter和mouseleave事件正在运行,clearTimout()似乎也不是因为管理栏仍然被隐藏.

_create_events : function(){

    var t = this;   // This object

    t.admin_bar = t.element

    /** Capture when the mouse is hovered over the 'Show admin bar' button */
    t.button.on('hover', function(e){

        t._show_admin_bar();
        t._set_timeout();   // Start a new timeout (to hide the admin bar if it's not hovered on)

    });

    /** Capture …

有没有办法可以使用jquery访问当前鼠标悬停在其上的元素？

我知道我可以通过将mouseover事件附加到元素来访问元素,但是当我没有向元素应用任何事件并且想要访问由鼠标从文档中的任何位置悬停的特定元素时怎么样？ ？

我的Highchart中的工具提示表现得很奇怪.它过着自己的生活.它没有显示我悬停点的工具提示,但随机显示任意点的工具提示.

这是一个JSFiddle示例:http://jsfiddle.net/AeV7h/9/

$(function () {

var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null,  MinValue: null, MaxValue: null, Decimals: 2 };

$('#container').highcharts({
        chart: {
            height: 700,
            width: 400,
            plotBorderWidth: 1,
            plotBorderColor: '#E4E4E4',
        },
        xAxis: {
            title: {
                useHTML: true,
                text: param.Name + "( m/s  )",
            },
            gridLineWidth: 1,
            min: param.MinValue,
            max: param.MaxValue,
            gridLineDashStyle: 'Dot',
            tickInterval: param.TickInterval
        },
        yAxis: {
            title: {
                text: 'Depth(m)',
            },
            reversed: true, …

我无法在此页面上移除悬停下划线:

http://www.studyroomguides.net/?page_id=19

我试过添加:

.a:hover{
text-decoration: none;
}

我想在悬停时删除下划线.

在悬停时我正在使用过渡来增加平滑图标.但问题是,当我将鼠标拖出图标时,它会立即恢复正常大小.我不知道如何通过减少图标来做同样的事情.我的意思是当我将鼠标拖出图标时,它应该转到正常大小并且具有相同的平滑过渡(不是即时).我希望你能理解我.这是我的代码:

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}

.facebook:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.instagram:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a>
			<a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li>
			<a target="_blank" href="#"><li><img …

我正在对导航菜单的最后一个子元素进行样式设置，似乎可以使用以下代码来做到这一点：

.aston-menu-light ul > li:last-child {
    border:2px solid blue;
    border-radius: 50px;
    padding:0 20px 0 20px;
} 

.aston-menu-light ul > li > ul > li:last-child {
    border:none !important;
    padding:0 !important;
} 

.aston-menu-light ul > li:last-child:hover {
    background-color:#ffff;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
} 

当我尝试将<a>鼠标悬停在最后一个孩子上时，麻烦就来了。我正在使用这个：

.aston-menu-light ul > li > a:last-child:hover {
    color:red !important;
} 

但这似乎为所有<a>标签加上了样式，而不仅仅是最后一个孩子。我已经尝试过各种变体，例如：ul > li a但我似乎无法正常工作。

我在这里有一个Codepen：https ://codepen.io/shaun-taylor/pen/LXdGGN

我的主要目标是，将鼠标悬停在顶级链接上时，仅将其上的最后一个链接变为红色，谢谢您的阅读！