Question

以下是我的代码：

＆＃13;

    * { 
        font-family: Arial;
    }
    .slide-container {
        /*border: solid 1px;*/
        width: 500px;
        height: 360px;
    }
    .slide-jumbo {
        /*border: solid 1px;*/
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .jumbo {
        position: relative;  
        display: inline-block;
        width: 500px;
        height: 300px;
        float: left;
    }
    .jumbo img, .thumb img {
        position: absolute;  
        left: 0;
    }
    .jumbo img {
        top: 0;
    }
    .thumb img {
        bottom: 0;
    }
    .jumbo-capt, .thumb-capt {
        width: 100%;
        background-color: rgba(0,0,0,0.8);  
        position: absolute;  
        color: #fff;  
        z-index: 100; 
      /*  -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  */
        left: 0;  
        bottom: 0;
    }
    .slide-thumb {
        /*border: solid 1px;*/
        width: 500px;
        height: 60px;
        overflow: hidden;
    }
    .thumb {
        position: relative;  
        /*border: solid 1px;*/
        display: inline-block;
        width: 100px;
        height: 60px;
        overflow: hidden;
        float: left;
    }

＆＃13;

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
    <title></title> 
    <script src="js/jquery.min.js"></script>
    <style type="text/css">
    * { 
        font-family: Arial;
    }
    .slide-container {
        /*border: solid 1px;*/
        width: 500px;
        height: 360px;
    }
    .slide-jumbo {
        /*border: solid 1px;*/
        width: 500px;
        height: 300px;
        overflow: hidden;
    }
    .jumbo {
        position: relative;  
        display: inline-block;
        width: 500px;
        height: 300px;
        float: left;
    }
    .jumbo img, .thumb img {
        position: absolute;  
        left: 0;
    }
    .jumbo img {
        top: 0;
    }
    .thumb img {
        bottom: 0;
    }
    .jumbo-capt, .thumb-capt {
        width: 100%;
        background-color: rgba(0,0,0,0.8);  
        position: absolute;  
        color: #fff;  
        z-index: 100; 
      /*  -webkit-transition: all 300ms ease-out;  
        -moz-transition: all 300ms ease-out;  
        -o-transition: all 300ms ease-out;  
        -ms-transition: all 300ms ease-out;  
        transition: all 300ms ease-out;  */
        left: 0;  
        bottom: 0;
    }
    .slide-thumb {
        /*border: solid 1px;*/
        width: 500px;
        height: 60px;
        overflow: hidden;
    }
    .thumb {
        position: relative;  
        /*border: solid 1px;*/
        display: inline-block;
        width: 100px;
        height: 60px;
        overflow: hidden;
        float: left;
    }

    </style>
</head>
<body>

<div class="slide-container">
    <div class="slide-jumbo">
        <div class="jumbo" data-image="1">
            <img src="images/2.png">
            <div class="jumbo-capt">
                <h3>Title 1</h3>
                <p>Summary 1</p>
            </div>
        </div>
        <div class="jumbo" data-image="2">
            <img src="images/3.png">
            <div class="jumbo-capt">
                <h3>Title 2</h3>
                <p>Summary 2</p>
            </div>
        </div>
        <div class="jumbo" data-image="3">
            <img src="images/9.png">
            <div class="jumbo-capt">
                <h3>Title 3</h3>
                <p>Summary 3</p>
            </div>
        </div>
        <div class="jumbo" data-image="4">
            <img src="images/7.png">
            <div class="jumbo-capt">
                <h3>Title 4</h3>
                <p>Summary 4</p>
            </div>
        </div>
        <div class="jumbo" data-image="5">
            <img src="images/9.png">
            <div class="jumbo-capt">
                <h3>Title 5</h3>
                <p>Summary 5</p>
            </div>
        </div>
    </div>
    <div class="slide-thumb">
        <div class="thumb" data-image="1">
            <img src="images/2small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 1
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="2">
            <img src="images/3small.png">
            <div class="thumb-capt">
               <p>
                    <strong>
                        Title 2
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="3">
            <img src="images/9small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 3
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="4">
            <img src="images/7small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 4
                    </strong>
                </p>
            </div>
        </div>
        <div class="thumb" data-image="5">
            <img src="images/9small.png">
            <div class="thumb-capt">
                <p>
                    <strong>
                        Title 5
                    </strong>
                </p>
            </div>
        </div>
    </div>
</div>

</body>
</html>

＆＃13;

如何添加任何js来更改图像并在鼠标悬停时显示标题？

Answer 1

试试这个：您可以使用mouseenter事件并使用fadeIn / fadeOut显示/隐藏图片。

$(function(){
  $('.slide-thumb .thumb').on("mouseenter",function(){
      var dataImage = $(this).data('image');
      $('.slide-jumbo .jumbo:visible').fadeOut(1000,function(){
         $('.slide-jumbo .jumbo[data-image="'+dataImage+'"]').fadeIn(500); 
      });
  });
});

<强> DEMO

jquery更改图像并在鼠标悬停时显示标题

1 个答案: