英文:

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

问题 {#heading}

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

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function(){
    $('.nft').on('mouseover', function() {
        $(this).toggle();
     });
});
<!-- language: lang-css -->
.img-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 25px;
}

.nft{
    width: 250px;
    height: 250px;
    background-color: cyan;
    border-radius: 15px;
    position: absolute;
    display: none;
    opacity: .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.1/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 -->

我尝试使用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 -->

$(document).ready(function(){
    $('.nft').on('mouseover', function() {
        $(this).toggle();
     });
});

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

.img-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 25px;
}

.nft{
width: 250px;
height: 250px;
background-color: cyan;
border-radius: 15px;
position: absolute;
display: none;
opacity: .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.1/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 -->

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

Thank you

答案1 {#1}

得分: 1

你可能想以另一种方式使其不可见，例如：

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

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


<!-- 语言: 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;
}

    
<!-- 语言: 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>

    
<!-- 结束代码片段 -->

英文:

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