Question

我的想法是创造这个： https://blog.hubspot.com/hs-fs/hubfs/dubsat-contact-us-cities.gif?t=1490783992392&width=690&height=585&name=dubsat-contact-us-cities.gif

但文字必须在div中，图片不仅要淡入淡出图片。继承人我的镜头：

＆＃13;

#first{
    position: absolute;

}
#second{
    position: absolute;

    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    position: absolute;
}
.text-box {
    position: absolute;
    height: 100%;
    text-align: center;
    width: 100%;
}
.text-box:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

＆＃13;

 <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>

    </head>
    <h1 id="third">Kontaktai</h1>
    <!-- <div class="image">-->

    <div id="first" onmouseenter="showSecondImage()" onmouseleave="hideSecondImage()">
        <h4 class="text-box ">whyyyy</h4>
        <img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg" >
    </div>

    <div id="second">
        <h4 class="text-box">why its not working</h4>
        <img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg" >
    </div>
    <script>
        $(".unbinded").unbind();
        function  showSecondImage() {
            document.getElementById('second').style.opacity=1;
        }
        function  hideSecondImage() {
            document.getElementById('second').style.opacity=0;
        }
    </script>

＆＃13;

为什么不能正常工作？我虽然我需要取消绑定onmouseenter和onmouseleave eventlisteners并绑定图片听鼠标进入..任何答案赞赏，我是新的。

Answer 1

您最初可以隐藏#second，然后触发它以显示您何时悬停#first或#second

#first {
  position: absolute;
}

#second {
  position: absolute;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  opacity: 0;
}

.text-box {
  position: absolute;
  height: 100%;
  text-align: center;
  width: 100%;
}

.text-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#first:hover + #second, #second:hover {
  opacity: 1;
}

<h1 id="third">Kontaktai</h1>

<div id="first">
  <h4 class="text-box ">whyyyy</h4>
  <img class="img-responsive" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/photoark-lion.png.adapt.945.1.jpg">
</div>

<div id="second">
  <h4 class="text-box">why its not working</h4>
  <img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2015/06/09/16/03BB5E5A0000044D-3117010-image-a-25_1433862086692.jpg">
</div>

Answer 2

就像Coker所说，你只能用CSS和伪选择器来做：hover。

＆＃13;

SyntaxError: Unexpected token 8\n    at parse (/Users/m.pagano/WebstormProjects/Challenge_2/Project2/sampsite/node_modules/body-parser/lib/types/json.js:83:15)\n    at /Users/m.pagano/WebstormProjects/Challenge_2/Project2/sampsite/node_modules/body-parser/lib/read.js:116:18\n    at invokeCallback (/Users/m.pagano/WebstormProjects/Challenge_2/Project2/sampsite/node_modules/raw-body/index.js:262:16)\n    at done (/Users/m.pagano/WebstormProjects/Challenge_2/Project2/sampsite/node_modules/raw-body/index.js:251:7)\n    at IncomingMessage.onEnd (/Users/m.pagano/WebstormProjects/Challenge_2/Project2/sampsite/node_modules/raw-body/index.js:307:7)\n    at emitNone (events.js:86:13)\n    at IncomingMessage.emit (events.js:185:7)\n    at endReadableNT (_stream_readable.js:974:12)\n    at _combinedTickCallback (internal/process/next_tick.js:74:11)\n    at process._tickCallback (internal/process/next_tick.js:98:9)

＆＃13;

            div
            {
                width:500px;
                height: 200px;
                cursor: pointer;
                background-size: cover;
                transition: background-image .6s ease-in-out;
            }
            .first
            {
                background-image: url("http://apopka.uhcpqdoe6fq4wtztv.netdna-cdn.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg");
            }
            .second
            {
                background-image: url("http://www.twitrcovers.com/wp-content/uploads/2012/11/Winter-snow-l.jpg");
            }
            .first:hover
            {
                background-image: url("http://trucosparadecorar.com/wp-content/uploads/2016/09/oto%C3%B1o2.jpg");
            }
            .second:hover
            {
                background-image: url("http://cadenaser00.epimg.net/ser/imagenes/2016/06/20/sociedad/1466419875_801497_1466420115_noticia_normal.jpg");
            }
            div p
            {
                color: white;
                text-align: center;
                font-size: 24px;
                position: relative;
                text-shadow: 1px 1px 10px black;
                top: 43%;
            }
            div:hover .hidden
            {
                display:block;
            }
            .hidden
            {
                display:none;
                font-size: 14px;
            }
            .shadow:hover
            {
                background: rgba(0,0,0,0.3);
            }

＆＃13;

html / jquery如何在mouseenter时将div与其子进行悬停

2 个答案: