通过悬停更改样式？

我已经修改与属性的文字：知名度，并没有:-(通过悬停更改样式？

我这个简单的代码工作，但它不工作：

$("#text").hover(function() { \t \t \t \t \t \t 
 
        \t //mouse enter 
 
        \t $("#blackbox").css({ \t \t \t 
 
         "visibility": "visible" 
 
        }); 
 
        }, 
 
        function(){ 
 
        \t //mouse leave 
 
        \t $("#blackbox").css({ \t \t \t 
 
         \t "visibility": "hidden" 
 
        \t }); 
 
      \t \t \t });

#text { 
 
    font-weight: 600; 
 
    font-size: 24px; 
 
} 
 
#blackbox { 
 
    visibility: hidden; 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px; 
 
}

<head> 
 
</head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h3><a href="#" id"text">Pasa el ratón:</a></h3> 
 
    <div id="blackbox"></div> 
 
</body>

不工作是什么问题？

我该怎么做，这样当鼠标通过链接时，图片颜色变了？

来源

2016-11-28 Isaac Palacio

** 1。**您错过了'$（'＃blackbox“）中的'＃'。 ** 2。**使用CSS可以更好地实现。 ** 3。**您可以使用jQuery的'hover（）'，它需要两个函数作为参数，一个用于'mousein'，一个用于'mouseout'。 – haim770

为什么不在CSS中使用'：hover'？。 – Roberrrt

@ haim770 $（ “＃文本”）mousein（函数（）{ $（ “＃黑盒”），CSS（\t { \t \t \t \t “背景色”： “黄” \t \t \t}） ; }）; （“＃text”）。mouseout（function（）{ $（“＃blackbox”）。css（\t {\t \t \t \t \t“background-color”：“black” }）; }）; –

尝试使用.hover（handleIn，handleOut）代替。另外，请注意你的jQuery选择器。

$("#blackbox")将选择标记与id="blackbox"

$("blackbox")将选择标签黑箱

<blackbox></blackbox>

$("#text").hover(function() { 
 
    //mouse enter 
 
    $("#blackbox").css({ \t \t \t \t 
 
     "background-color": "yellow" 
 
    }); 
 
}, 
 
function() { 
 
    //mouse leave 
 
\t $("#blackbox").css({ \t \t \t \t \t 
 
     "background-color": "black" 
 
\t }); 
 
});

#text { 
 
    font-weight: 600; 
 
    font-size:24px; 
 
} 
 

 
#blackbox { 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px;  
 
}

<h3><a href="#" id="text">Pasa el ratón:</a></h3> 
 
    <div id="blackbox"></div>

来源

2016-11-28 14:15:25

谢谢！我修改了以下属性的文本：知名度和它不起作用:-( –

它应该工作。 https://jsfiddle.net/zo6wgdrg/ –

请，从来没有使用if-else为mouseenter和mouseleave功能，您有具体的功能可以这样做：

$("#text").on("hover", function(e) { 
    //on entering 
    $("blackbox").css( {        
     "background-color": "yellow" 
    }); 
    //on leaving 
    $(this).mouseleave(function(){ 
     $("blackbox").css( {        
      "background-color": "black" 
     });  
    }); 
});

我希望它能帮助

来源

2016-11-28 14:17:26 Learner

好了，所以大家都知道，家长选择不存在CSS然而，我们在CSS中有兄弟选择器+，这比返回到jQuery/JavaScript更容易。

考虑下面的HTML语法，我们可以使用纯CSS创建悬停：

#text { 
 
    font-weight: 600; 
 
    font-size:24px; 
 
} 
 

 
#blackbox { 
 
    background-color: black; 
 
    height: 100px; 
 
    margin: 100px; 
 
    width: 100px;  
 
} 
 

 
#text:hover + #blackbox { 
 
\t background-color: #0FF; 
 
}

<h3 id="text"><a href="#">Pasa el ratón:</a></h3> 
 
<div id="blackbox"></div>

我没有改变id="text"您h3父元素，因为a不是您的#blackbox的兄弟姐妹。

来源

2016-11-28 14:24:47 Roberrrt

行为会发生一些变化...如果您将鼠标悬停在这是因为** h3 **宽于** a ** – vals

啊，当然，默认样式仍然适用。 – Roberrrt

hi @Roberrrt，具有属性可见性：可见;它不工作 –

通过悬停更改样式？

回答

相关问题