使用Jquery如何通过鼠标悬停来移除display none（CSS）？

huangapple
go评论142阅读模式
英文:

How do I Remove(using a mouseover) a display none(CSS) with Jquery?

问题

我正在制作一个卡片NFT项目，以进行练习，当我鼠标悬停在上面时，应该从HTML类“nft”中移除display:none。我尝试了很多方法，包括仅使用CSS，但没有取得结果。如果有人可以帮助我或提供解释，我将非常感激。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  2. <!-- language: lang-js -->
  3. $(document).ready(function(){
  4.     $('.nft').on('mouseover', function() {
  5.         $(this).toggle();
  6.      });
  7. });
  8. <!-- language: lang-css -->
  9. .img-text{
  10.     display: flex;
  11.     flex-direction: column;
  12.     justify-content: space-between;
  13.     margin: 10px 25px;
  14. }
  16. .nft{
  17.     width: 250px;
  18.     height: 250px;
  19.     background-color: cyan;
  20.     border-radius: 15px;
  21.     position: absolute;
  22.     display: none;
  23.     opacity: .5;
  24.     cursor: pointer;
  25. }
  27. .eye{
  28.     position: relative;
  29.     top: 100px;
  30.     left: 40%;
  31. }
  32. .nft-image{
  33.     max-height: 250px;
  34.     max-width: 250px;
  35.     
  36.     border-radius: 15px;
  37. }
  38. <!-- language: lang-html -->
  39. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  40. <div class="img-text">
  41.    <div class="nft">
  42.        <img src="./img/icon-view.svg" alt="" class="eye">
  43.     </div>
  44.     <img class="nft-image" src="./img/image-equilibrium.jpg" alt="NFT">
  45.     <h1 class="heading">Equilibrium #3429</h1>
  46. </div>
  47. <!-- end snippet -->

我尝试使用CSS的:hover伪类、在HTML中添加和移除类以及使用jQuery，但没有取得结果。

谢谢！

英文:

i am making a card nft project to practice where when i mouseover it should remove the display:none from the HTML class="nft" . I tried many things also only using CSS but i didn't achieve the results. If anyone could help me or give a explanation to make help I really apreciate.
HTML:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function(){
  2.     $(&#39;.nft&#39;).on(&#39;mouseover&#39;, function() {
  3.         $(this).toggle();
  4.      });
  5. });

<!-- language: lang-css -->

  1. .img-text{
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: space-between;
  5.     margin: 10px 25px;
  6. }
  8. .nft{
  9.     width: 250px;
  10.     height: 250px;
  11.     background-color: cyan;
  12.     border-radius: 15px;
  13.     position: absolute;
  14.     display: none;
  15.     opacity: .5;
  16.     cursor: pointer;
  17. }
  19. .eye{
  20.     position: relative;
  21.     top: 100px;
  22.     left: 40%;
  23. }
  24. .nft-image{
  25.     max-height: 250px;
  26.     max-width: 250px;
  27.     
  28.     border-radius: 15px;
  29. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;img-text&quot;&gt;
  3.    &lt;div class=&quot;nft&quot;&gt;
  4.        &lt;img src=&quot;./img/icon-view.svg&quot; alt=&quot;&quot; class=&quot;eye&quot;&gt;
  5.     &lt;/div&gt;
  6.     &lt;img class=&quot;nft-image&quot; src=&quot;./img/image-equilibrium.jpg&quot; alt=&quot;NFT&quot;&gt;
  7.     &lt;h1 class=&quot;heading&quot;&gt;Equilibrium #3429&lt;/h1&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

I tried using Hover with CSS, add and removing classes in html and using jquery but no result

Thank you

答案1

得分: 1

  1. 你可能想以另一种方式使其不可见，例如：
  3. &lt;!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false --&gt;
  5. &lt;!-- 语言: lang-js --&gt;
  6. $(document).ready(function () {
  7.   let show = true
  8.   $(&#39;.nft&#39;).on(&#39;mouseover&#39;, function () {
  9.     $(this).css(&#39;background-color&#39;, show ? &#39;cyan&#39; : &#39;&#39;)
  10.     show = !show
  11.   })
  12. })
  13.    
  16. &lt;!-- 语言: lang-css --&gt;
  17. .img-text {
  18.   display: flex;
  19.   flex-direction: column;
  20.   justify-content: space-between;
  21.   margin: 10px 25px;
  22. }
  24. .nft {
  25.   width: 250px;
  26.   height: 250px;
  27.   border-radius: 15px;
  28.   position: absolute;
  29.   opacity: 0.5;
  30.   cursor: pointer;
  31. }
  33. .eye {
  34.   position: relative;
  35.   top: 100px;
  36.   left: 40%;
  37. }
  38. .nft-image {
  39.   max-height: 250px;
  40.   max-width: 250px;
  42.   border-radius: 15px;
  43. }
  45.     
  46. &lt;!-- 语言: lang-html --&gt;
  47. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js&quot;&gt;&lt;/script&gt;
  48. &lt;div class=&quot;img-text&quot;&gt;
  49.   &lt;div class=&quot;nft&quot;&gt;
  50.     &lt;img src=&quot;./img/icon-view.svg&quot; alt=&quot;&quot; class=&quot;eye&quot; /&gt;
  51.   &lt;/div&gt;
  52.   &lt;img class=&quot;nft-image&quot; src=&quot;./img/image-equilibrium.jpg&quot; alt=&quot;NFT&quot; /&gt;
  53.   &lt;h1 class=&quot;heading&quot;&gt;Equilibrium #3429&lt;/h1&gt;
  54. &lt;/div&gt;
  56.     
  57. &lt;!-- 结束代码片段 --&gt;
英文:

You'd want to make it invisible in another way such as this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(document).ready(function () {
let show = true
$('.nft').on('mouseover', function () {
$(this).css('background-color', show ? 'cyan' : '')
show = !show
})
})

<!-- language: lang-css -->
.img-text {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 10px 25px;
}

.nft {
width: 250px;
height: 250px;
border-radius: 15px;
position: absolute;
opacity: 0.5;
cursor: pointer;
}

.eye {
position: relative;
top: 100px;
left: 40%;
}
.nft-image {
max-height: 250px;
max-width: 250px;

border-radius: 15px;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="img-text">
<div class="nft">
<img src="./img/icon-view.svg" alt="" class="eye" />
</div>
<img class="nft-image" src="./img/image-equilibrium.jpg" alt="NFT" />
<h1 class="heading">Equilibrium #3429</h1>
</div>

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 19:18:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875234.html
  • css
  • html
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定