具有悬停效果的网格内容，无法正确关闭

Question

我的网格有问题。

将鼠标悬停在缩略图上时，出现了一些文字 - 效果很好。

单击时，我有一些内容出现在缩略图下的 div 中 - 工作正常。

但是，如果我单击那个 div 内容的关闭按钮，覆盖缩略图的悬停将停止工作。

有人能帮我解决一下吗？会很棒:)

感谢您的帮助和时间:)

附上我的codepen，一切都会更清楚:):

http://codepen.io/anon/pen/rxBmYa

下面是用于悬停效果的 jquery 即时消息：

$('ul.thumbs li').on('click', function(e){
   $('ul.thumbs li').find('.description').css('opacity',0);
   $(e.target).css('opacity',1);
});

Answer 1

我对你的 js 做了一点小改动，这在你的 codepan 中工作正常。

// Close content
            self.$elem.find('.close').click(function(){
                self.$elem.find('li a.thumbnail .active-arrow').remove();
                //i have add this new line for remove opacity of your selection 
                self.$elem.find('li a.thumbnail .description').css('opacity',0);
                self.$elem.find('li.content').remove();
            });

Answer 2

请看下面的代码片段。无法使用 codepane，因此将您的代码移至此处：

$('ul.thumbs li').on('click', function(e){
   $('ul.thumbs li').find('.description').css('opacity',1);
  $('ul.thumbs li').find('.description .text').css('opacity',0);
   $(this).find('.description').css('opacity',0);
});

$(document).ready(function() {
                $('.thumbs').portfolio({
                    cols: 4,
                    transition: 'slideDown'
                });
            });

// Utility
if (typeof Object.create !== 'function') {
    Object.create = function(obj) {
        function F() {};
        F.prototype = obj;
        return new F();
    };
}

(function($, window, document, undefined) {

    var Portfolio = {
        init: function(options, elem) {
            var self = this;

            self.$elem = $(elem);
            self.$thumnail = $(elem).find('.thumbnail');

            // Options
            self.options = $.extend({}, $.fn.portfolio.options, options || {});

            // Set columns width
            self.setColWidth();

            // On click
            self.$thumnail.click(function() {
                self.showContent($(this));
            });
        },
        setColWidth: function() {
            var self = this;

            if ($(window).width() > 970) {
                var colWidth = ((100 / self.options.cols));
                self.$elem.find('li').css('width', colWidth + '%');
            }
        },
        getContentPos: function(clicked) {
            var self = this,
                thumbnails = self.$elem.find('.thumbnail'),
                contentPos = null;

            for (var i = 0; i <= thumbnails.length; i++) {
                // Get href
                var href = clicked.attr('href');

                if (href == $(thumbnails[i]).attr('href')) {
                    // If its not the last thumb
                    if (i !== (thumbnails.length - 1)) {

                        var cols = self.options.cols;
                        if ($(window).width() <= 1200 && $(window).width() > 970) cols = 3;
                        else if ($(window).width() <= 970 && $(window).width() > 590) cols = 2;
                        else if ($(window).width() <= 590) cols = 1;

                        // thumb position
                        var thumbPos = i + 1;
                        // If there's no reminder
                        var contentPos = 0;
                        if (thumbPos % cols !== 0)
                            contentPos = (cols - (thumbPos % cols)) + thumbPos;
                        else // If we have a reminder
                            contentPos = thumbPos;

                        // Clean & Validate (This fixes weird bug when there's only 2 thumbs)
                        if (contentPos > thumbnails.length) {
                            contentPos = thumbnails.length;
                        }
                    } else {
                        contentPos = i + 1;
                    }
                }
            }

            return contentPos;
        },
        showContent: function(thumbnail) {
            var $href = thumbnail.attr('href'),
                self = this,
                contentPos = self.getContentPos(thumbnail);

            // Remove existing stuff first
            self.$elem.find('li a.thumbnail .active-arrow').remove();
            self.$elem.find('li.content').remove();
   self.$elem.find('.description').css('opacity','');
            // Add active arrow
            thumbnail.append('<span class="active-arrow"></span>');

            // Add content
            var $portfolioContent = $($href);
            var html = '<li class="content"><span class="close">&times;</span>' + $portfolioContent.html() + '</li>';

            self.$elem.find('li:eq(' + (contentPos - 1) + ')').after(html);

            // Animate
            self.$elem.find('li')[self.options.transition](500);
            $('html, body').animate({
                scrollTop: self.$elem.find('li.content').offset().top -150
            }, 700);

            // Close content
            self.$elem.find('.close').click(function(){
                self.$elem.find('li a.thumbnail .active-arrow').remove();
                self.$elem.find('li.content').remove();
    self.$elem.find('.description').css('opacity','');
                
            });
        }
    };

    $.fn.portfolio = function(options) {
        return this.each(function(){
            var portfolio = Object.create(Portfolio);
            portfolio.init(options, this);
        });
    };

    // Default options
    $.fn.portfolio.options = {
        cols: 3,
        transition: 'slideDown'
    };
})(jQuery, window, document);

ul.thumbs {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

ul.thumbs li {
    display: inline-block;
    height: 380px;
    overflow: hidden;
    padding: 0;
    float: left;
    position: relative;
}

ul.thumbs li .editable{
    background-color: rgba(0,0,0,0.8);
  background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 50%;
    display: block;
    /* overflow: hidden; */
    box-sizing: border-box;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    z-index: 9;
    width: 100%;
    height: 100%;
}


ul.thumbs li a.thumbnail:hover {
    display: inline-block;
    height: 380px;
    overflow: hidden;
    padding: 0;
    float: left;
    position: relative;
    background-color: rgba(0,0,0,0.8);}

ul.thumbs li a.thumbnail {
 background-repeat: no-repeat;
 background-size: cover;
    background-color: #cecece;
    background-position-x: 50%;
 display: block;
 /*overflow: hidden;*/
    box-sizing: border-box;
 transition: opacity 0.3s;
 -webkit-transition: opacity 0.3s;
 -moz-transition: opacity 0.3s;
 z-index: 9;
    width: 100%;
    height: 100%;
}

ul.thumbs li a.thumbnail h4 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 10px;
    text-transform: uppercase;
    background-color: #efefef;
    color: #6b6b6b;
    font-size: 14px;
    margin: 0;
}

ul.thumbs li a.thumbnail .description {
    padding: 0;
    position: absolute;
    height: 0;
    bottom: 0;
    width: 100%;
    height:100%;
    box-sizing: inherit;
    opacity: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    color: #fff;
    background-color: rgba(0, 0,0,0.5);
    font-size: 18px;
    padding: 18px 12px;
    line-height: 10px;
    box-sizing: inherit;
    text-align: center;
}

ul.thumbs li a.thumbnail .active-arrow {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #fff;
    bottom: -2px;
    z-index: 99;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@media (max-width: 970px)  {
 ul.thumbs li {
  width: 50% !important;
 }
 .media iframe{
  width: 100%;
 }
}

@media (max-width: 1200px) and (min-width: 970px) {
    ul.thumbs li {
        width: 33.3333% !important;
    }
}

ul.thumbs li a.thumbnail:hover .description {
 height: 100%;
 opacity: 1;
}

ul.thumbs li a.thumbnail:hover .text {
 opacity: 1!important;
}

ul.thumbs li.content {
 width: 100% !important;
 display: none;
 margin-bottom: 40px;
 background: none;
 float: left;
    height: 250px;
 position: relative;
 padding: 45px 0 45px;
}

ul.thumbs li.content h3 {
    display: inline-block;
}

ul.thumbs li.content .close {
    position: absolute;
    top: 0;
    right: 0;
    color: #c2c2c2;
    cursor: pointer;
    font-weight: normal;
    font-family: -webkit-pictograph;
    font-size: 76px;
    line-height: 70px;
}

ul.thumbs li.content .close:hover {
    opacity: 0.7;
}

ul.thumbs li.content .media {
    display: inline-block;
    float: left;
    margin-right: 20px;
    width: 50%;
    min-height: 200px;
}

ul.thumbs li.content .media img {
    max-width: 100%;
}

@media (max-width: 1080px) {
 .close {
  right: 0 !important;
  top: 7px !important;
 }
 ul.thumbs .media {
  margin-right: 0;
  margin-bottom: 20px;
 }
}
@media (max-width: 590px) {
 ul.thumbs li {
  width: 100% !important;
 }
 ul.thumbs .media {
  display: none !important;
 }
}
@media (max-width: 700px) and (min-width: 590px) {
 ul.thumbs .media {
  width: 100% !important;
  display: block !important;
  margin-top: 60px;
 }
}

.portfolio-content {
    display: none;
}

   body {
                font-family: arial;
            }
            hr {
                margin-bottom: 40px;
            }
            h1 {
                margin-bottom: 0px;
                margin-top: 30px;
            }
            h3 {
                margin-top: 10px;
                font-weight: normal;
                color: #a6a6a6;
            }
            p {
                line-height: 25px;
            }
            a.button {
                text-decoration: none;
            }
            .button {
                padding: 14px 22px;
                background-color: #cecece;
                color: #333333;
                border-radius: 3px;
                margin-bottom: 20px;
                display: inline-block;
            }
            .button:hover {
                background-color: #e1e1e1;
            }
            .thumbs {
                display: block;
            }
            .footer {
                display: block;
                width: 100%;
                margin-top: 50px;
                margin-bottom: 30px;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <ul class="thumbs">

     
            <li><a href="#thumb1" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')">
        <span class="description"><span class="text">Get the latest technologies</span></span></a>
            </li>
            <li>
                <a href="#thumb2" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Fast and reliable performance</span></span></a>
            </li>
            <li>
                <a href="#thumb3" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Slick and responsive website</span></span></a>
            </li>
            <li>
                <a href="#thumb4" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Reduce costs and increase productivity</span></span></a>
            </li>
            <li>
                <a href="#thumb5" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Brochures, logos, banners</span></span></a>
            </li>
            <li>
                <a href="#thumb6" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Nunc condimentum magna</span></span></a>
            </li>
            <li>
                <a href="#thumb7" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Nunc condimentum magna</span></span></a>
            </li>
            <li>
                <a href="#thumb8" class="thumbnail" style="background-image: url('https://static1.squarespace.com/static/559a567ee4b0d82ab99c24e8/t/565347bde4b0a91f72ad2dc5/1448298431850/3.jpg?format=500w')"><span class="description"><span class="text">Morbi pellentesque quam vitae</span></span></a>
            </li>
           
           
        </ul>

        <div class="portfolio-content">
            <div id="thumb1">
                <div class="media"><iframe src="//player.vimeo.com/video/69666609?byline=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
                <h1>Web development</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis nisi sit amet metus venenatis, ut congue turpis aliquet. Pellentesque eget elit sollicitudin, feugiat felis in, ornare diam. Morbi blandit sapien nibh, eu pulvinar tortor luctus nec. Aenean lobortis lacus cursus gravida adipiscing. Praesent in odio porta, placerat felis id, viverra est. Nam magna quam, tincidunt eget augue in, aliquet tristique ipsum.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb2">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>SEO</h1>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Integer a posuere tortor. Praesent malesuada mauris massa, non blandit neque tempus nec. Quisque fermentum nunc non hendrerit tempus.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb3">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Web design</h1>
                <p>Ut condimentum eros bibendum metus lacinia, ac condimentum justo faucibus. Nam nec dui convallis, sodales sapien in, gravida justo. Pellentesque pulvinar massa a nisl iaculis, quis iaculis elit tincidunt.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb4">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Project management</h1>
                <p>Suspendisse cursus commodo elit, at tempus felis hendrerit vel. Cras condimentum aliquam mauris at blandit. Pellentesque ac velit iaculis, lobortis nibh id, ultricies ante. Fusce vel urna justo. Maecenas rhoncus vel ligula eget feugiat. Maecenas blandit risus eros, vel imperdiet augue dapibus vitae.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb5">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb5">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb5">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb5">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb6">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb7">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb8">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb9">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb10">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb11">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb12">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb13">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb14">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>Graphic design</h1>
                <p>Vestibulum gravida, ante ut consectetur dictum, dolor sapien pretium elit, sed tincidunt augue sem a lorem. Vivamus quis neque pharetra, consequat dolor vel, venenatis urna. Praesent diam quam, fermentum vel tortor eget, pulvinar tincidunt velit.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
        </div>

Answer 3

您可以使用以下css

ul.thumbs li a.thumbnail:hover .description {
    height: 100%;
    opacity: 1 !important;
}

而不是

ul.thumbs li a.thumbnail:hover .description {
    height: 100%;
    opacity: 1;
}

具有悬停效果的网格内容，无法正确关闭

Grid content with hover effect, can not close correctly

grid

jquery

overlay

addclass