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

I display 6 images:

我显示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;
        }
    }

I'm trying here to implement a script that tells the image to have opacity to 0.3 and to display text on image.

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

Here is what i've got :

这是我得到的:

$('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"});
});

It almost works but the only bug is that when i leave my mouse of an image and directly go onto another h3 tag, it keeps the previous h3 hovered tag displayed. Otherwise, everything works perfectly. A solution would be to have a "highlight" class specific to each divs but it makes my jQuery script too long

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

Do you have any idea how to fix this ? Or do you have any suggestions how to do it cleaner ?

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

Thanks.

2 个解决方案

#1

You don't need javascript for that. Instead, use the :hover pseudo-selector from CSS.

你不需要javascript。相反,使用CSS中的:hover伪选择器。

See this JSFiddle for a simple example : https://jsfiddle.net/10aq644s/

请参阅此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;
  }

#2

jQuery solution. In HTML I've moved class="highlight" to parent div:

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"});
});