選擇當前懸停的div

我有一個登錄頁面，我對這些影像使用了相同的類

和這里的代碼來切換哪個影像中的文本

$(".overlay").hide();

  $(".projects-img, this").mouseover(() => {
    $(".overlay, this").show();
  });

  $(".projects-img, this").mouseout(() => {
    $(".overlay").hide();
  });

html

<div class="hold-img">
    <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
    <div class="overlay">
        Full landing page, made mostly with CSS and some cool stuff, enjoy it.
    </div>
</div>
<div class="hold-img">
    <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">  
    <div class="overlay">
        Full landing page, made mostly with CSS and some cool stuff, enjoy it.
    </div>
</div>
<div class="hold-img">
    <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">                
    <div class="overlay">
        Full landing page, made mostly with CSS and some cool stuff, enjoy it.
    </div>
</div> 

問題是，當懸停在任何 img 下時，首先激活 img 的文本，我怎樣才能只激活我懸停的當前 img 內的文本？

uj5u.com熱心網友回復：

您不需要this在事件系結中。選擇相應的疊加層時，您需要懸停的影像的同級。在選擇器中使用this是為了查找子元素，而不是兄弟元素。

您可以使用 jQuery 的.hover()方法在一次呼叫中執行 mouseover 和 mouseout。

$(".overlay").hide();

$(".projects-img, this").hover(function() {
  $(this).siblings(".overlay").show();
}, function() {
  $(".overlay").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>

你也可以在沒有任何 JavaScript 的情況下做到這一點，只需要 CSS。選擇器.projects-img:hover .overlay匹配overlay緊跟懸停類的projects-img類。

.overlay {
  display: none;
}

.projects-img:hover   .overlay {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>
<div class="hold-img">
  <img class="projects-img" src="https://media.istockphoto.com/photos/empire-state-building-at-night-picture-id533998713?b=1&k=20&m=533998713&s=170667a&w=0&h=MYfmvpyj7Sr7ibb-c1e3X__Elvgdfurq3unYvENjd6A=" height="300px" width="350px" alt="my first web site">
  <div class="overlay">
    Full landing page, made mostly with css and some cool stufs, enjoy it.
  </div>
</div>

標籤：javascript html jQuery css

上一篇：如何更新本地存盤中的時間戳？

下一篇：datepicker沒有將值系結到角度表單控制元件