通过悬停改变风格？答案

【问题标题】：Changing style through hover?通过悬停改变风格？
【发布时间】：2016-11-28 14:06:52
【问题描述】：

我用属性修改了文本：可见性，它不起作用:-(

我有这个简单的代码，但它不起作用：

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

#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>

不工作有什么问题？

我该怎么做，让鼠标经过链接时，图片变色？

【问题讨论】：

1. 您在$("#blackbox") 中缺少#。 2. 最好使用 CSS 来实现。 3. 您可以使用 jQuery 的 hover()，它需要两个函数作为参数，一个用于mousein，一个用于mouseout。
为什么不在 CSS 中使用 :hover？
@haim770 $("#text").mousein(function() { $("#blackbox").css( { "background-color": "yellow" }); }); $("#text").mouseout(function() { $("#blackbox").css( { "background-color": "black" }); });
@Roberrrt 因为它会影响另一个元素
@IsaacPalacio 让我用+ 选择器的魔力来回答这个问题。

标签： jquery css hover

【解决方案1】：

好的，所以我们都知道 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 {
	background-color: #0FF;
}

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

我确实将id="text" 更改为您的h3 父元素，因为a 不是您的#blackbox 的兄弟。

【讨论】：

行为发生了一点变化……如果您将鼠标悬停在 a 的右侧，则会触发悬停。这是因为 h3 比 a 宽
嗨@Roberrrt，属性可见性：可见；它不起作用
@IsaacPalacio 哪个元素应该拥有该属性？
@Roberrrt #text { font-weight: 600;字体大小：24px； } #blackbox { 可见性：隐藏；背景颜色：黑色；高度：100px；边距：100px；宽度：100px； } #text:hover + #blackbox { 可见性：可见； }
@Roberrrt 可以了，html有一个小错误谢谢！！

【解决方案2】：

尝试使用 .hover(handleIn, handleOut) 代替。此外，请注意您的 jQuery 选择器。

$("#blackbox") 将选择带有id="blackbox" 的标签

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

<blackbox></blackbox>

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

#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>

【讨论】：

谢谢！！我用属性修改了文本：可见性，它不起作用:-(

【解决方案3】：

请不要将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"
        });     
    });
});

希望对你有帮助

【讨论】：