通過懸停更改樣式？

我已經修改與屬性的文字：知名度，並沒有:-(通過懸停更改樣式？

我這個簡單的代碼工作，但它不工作：

$("#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，具有屬性可見性：可見;它不工作 –

通過懸停更改樣式？

回答

相關問題