我的网格有问题。
在悬停缩略图时，我有一些显示的文字 - 效果很好。
点击后，我有一些内容出现在缩略图下的div中 - 工作正常。
但是，如果我点击该div内容的关闭按钮，则悬停在覆盖缩略图上停止工作。
有人会有任何解决方案来帮助我吗？这将是太棒了:)）
感谢您的帮助和时间：）
附件是我的代码笔，一切都会更清晰：）：
http://codepen.io/anon/pen/rxBmYa
以下是用于悬停效果的jquery im：
$('ul.thumbs li').on('click', function(e){
$('ul.thumbs li').find('.description').css('opacity',0);
$(e.target).css('opacity',1);
});
答案 0 :(得分：1)
你可以使用以下css
ul.thumbs li a.thumbnail:hover .description {
height: 100%;
opacity: 1 !important;
}
而不是
ul.thumbs li a.thumbnail:hover .description {
height: 100%;
opacity: 1;
}
答案 1 :(得分：0)
我的js有一点变化，这在你的代码中运行良好。
// 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();
});
答案 2 :(得分：0)
请您查看下面的代码段。无法使用代码窗格，因此将代码移到此处：
$('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">×</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>