Question

我显示6张图片：

HTML：

<div class="row-project">
    <div style="position:relative;">
        <div class="hololens highlight"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
    </div>
    <div style="position:relative">
        <div class="cinetik highlight"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
    </div>
    <div style="position:relative">
        <div class="fly360 highlight"></div>
    </div>
</div>
<div class="row-project">
    <div style="position:relative">
        <div class="train highlight"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3>
    </div>
    <div style="position:relative">
        <div class="avion highlight"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3>
    </div>
    <div style="position:relative">
        <div class="cinema highlight"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinéma</h3>
    </div>
</div>

CSS：

.row-project{
    height: 250px;
    width: 1200px;
    position: relative;
    display: flex;
    @media screen and (max-width: 830px) {
        width: 400px;
        height: 750px;
        flex-direction:column;
    }
    @media screen and (max-width: 350px) {
        width: 250px;
        height: 469px;
    }
    margin: auto;
    div{
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;

    }
    h3{
        margin: auto;
        font-family: $theme-font-light;
        font-size: 40px;
        position: absolute;
        cursor: default;
        display: none;
        }
    }
    .hololens{
        background: url('../img/hololens.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }

    }
    .cinetik{
        background: url('../img/cinetik-homme.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }
    }
    .fly360{
        background: url('../img/360fly.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }
    }
    .train{
        background: url('../img/train.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }
    }
    .avion{
        background: url('../img/avion.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }
    }
    .cinema{
        background: url('../img/cinema.jpg') no-repeat center center;
        border-radius: 15px;
        @media screen and (max-width: 350px) {
            background-size: 250px;
        }
    }

我在这里尝试实现一个脚本，告诉图像不透明度为0.3并在图像上显示文字。

这是我得到的：

$('h3').hover(function(){
    $(this).siblings("div").css({
       opacity: '0.3', transition : "0.3s"
    });
    $(this).css({display : "block"});
});

$("h3").mouseleave(function(){
    $(this).siblings("div").css({
       opacity: '1', transition : "0.3s"
    });
    $(this).css({display : "block"});
});

$('.highlight').hover(function(){
    $(this).css({
       opacity: '0.3', transition : "0.3s"
    });
    $(this).siblings("h3").css({display : "block"});
});

$(".highlight").mouseleave(function(){
    alert("ok");
    $(this).css({
       opacity: '1', transition : "0.3s"
    });
    $(this).siblings("h3").css({display : "none"});
});

它几乎可以工作，但唯一的错误是，当我离开鼠标的图像并直接进入另一个h3标签时，它会保留先前的h3悬停标签。否则，一切都很完美。一个解决方案是拥有一个突出显示的＆＃34;特定于每个div的类，但它使我的jQuery脚本太长

你知道如何解决这个问题吗？或者您有什么建议如何清洁？

感谢。

Answer 1

你不需要javascript。相反，请使用CSS中的：hover伪选择器。

请参阅此JSFiddle以获取一个简单示例：https://jsfiddle.net/10aq644s/

HTML：

<div>
  <div class="container">
    <img src="http://placehold.it/300x300">
    <h3>Hello World !</h3>
  </div>
  <div class="container">
    <img src="http://placehold.it/300x300">
    <h3>Hello World !</h3>
  </div>
</div>

CSS：

.container {
  position: relative;
  width: 300px;
}

.container
  > img {
    border: solid 1px red;
  }
.container
  > h3 {
    display: block;
    visibility: hidden;
    top: 0;
    position: absolute;
    width: 300px;
    text-align: center;
  }
.container:hover
  > h3 {
    visibility: visible;
  }

Answer 2

jQuery解决方案。在HTML中，我已将class="highlight"移至父div：

<div class="row-project">
    <div style="position:relative;" class="highlight">
        <div class="hololens"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
    </div>
    <div style="position:relative" class="highlight">
        <div class="cinetik"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Hololens</h3>
    </div>
    <div style="position:relative" class="highlight">
        <div class="fly360"></div>
    </div>
</div>
<div class="row-project">
    <div style="position:relative" class="highlight">
        <div class="train"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Train</h3>
    </div>
    <div style="position:relative" class="highlight">
        <div class="avion"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Rafale</h3>
    </div>
    <div style="position:relative" class="highlight">
        <div class="cinema"></div>
        <h3 style="right:0px;left:0px; top:94px; margin:auto;">Cinema</h3>
    </div>
</div>

的javascript：

$('.highlight').hover(function() {
    var $this = $(this);
    $this.find('div').css({
       opacity: '0.3', transition : "0.3s"
    });
    $this.find('h3').css({display : "block"});
}, function() {
    var $this = $(this);
    $this.find('div').css({
       opacity: '1', transition : "0.3s"
    });
    $this.find('h3').css({display : "none"});
});

悬停div，显示文字和不透明度

2 个答案: