Question

我使用属性修改了文本：visibility并且它不起作用： - （

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

不工作有什么问题？

我如何，当鼠标通过链接时，图片会改变颜色？

Answer 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的兄弟。

Answer 2

尝试使用.hover（handleIn，handleOut）代替。另外，要小心你的jQuery选择器。

do { try audioSession.setCategory(AVAudioSessionCategoryPlayback, with: .duckOthers) } catch { }会选择$("#blackbox")

标记

id="blackbox"将选择标签blackbox

$("blackbox")

＆＃13;

<blackbox></blackbox>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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"
        });     
    });
});

我希望它有所帮助

通过悬停改变风格？

3 个答案: