我有一个投资组合网站
www.malthestigaard.com
我使用Cube Portfolio JavaScript插件显示一些投资组合案例。每个投资组合案例都有一个连接到它的标题，在桌面上显示鼠标悬停/悬停。问题当然是当在移动设备上查看我的网站时，没有鼠标悬停在投资组合案例上并且标题仍然隐藏（据我所知，它只隐藏特定屏幕尺寸的标题，但是因为我是html和css的新手我很难弄清楚在哪里找到合适的媒体查询以及如何更改它们，而且我认为如果它总是显示它将有益于用户体验）。所以我的问题是，如何更改css或javascript以便标题始终显示？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="google-site-verification" content="MUWlt9WTlzFb8HfafpTZqH5IG7Em-w30oBgQQZKX1jc" />
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days" />
<link rel="canonical" href="http://www.malthestigaard.com" />
<meta name="author" content="Malthe Stigaard | www.malthestigaard.com">
<meta name="description" content="Website and Portfolio of Malthe Stigaard | www.malthestigaard.com" />
<meta name="keywords" content="Digital Design, Print Design, Photography, Video Production, Web Design, Portfolio, Malthe Stigaard" />
<meta name="geo.country" content="DK" />
<meta property="og:title" content="Portfolio of Malthe Stigaard" />
<meta property="og:description" content="Website and Portfolio of Malthe Stigaard | www.malthestigaard.com" />
<meta property="og:url" content="http://malthestigaard.com/index.thml" />
<meta property="og:image" content="http://malthestigaard.com/images/image-ogf.jpg" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<title>Malthe Stigaard | Graphic & Web Design | www.malthestigaard.com</title>
</head>
<body>
<div class="wrapper">
<nav>
<div class="content-wrapper">
<div class=textclear>
<div class="alignleft">
<h1 class="firsth1"> <a href="http://www.malthestigaard.com"> MALTHE STIGAARD </a></h1></div>
<div class="alignright">
<ul>
<h1><li> <a href="#work" type="button"> WORK </a></li><li> <a href="#about" type="button"> ABOUT </a></li><li> <a href="#contact" type="button"> CONTACT </a></li></h1></ul>
</div>
</div>
</div>
</nav>
<section id="banner">
<div id="bannercontainer">
<h2>I'M MALTHE STIGAARD</h2>
<div id="bannerlinescontainer">
<div class="grad"></div>
<h1><p>DIGITAL DESIGN<br>PRINT DESIGN<br>VIDEO PRODUCTION<br>PHOTOGRAPHY</p></h1>
<div class="grad"></div>
</div>
<h2>WELCOME TO MY PORTFOLIO</h2> <a href="#work" type="button" class="workbutton"> see my work </a></div>
</section>
<section id="work">
<h1>MY WORK</h1>
<div class="copytext"> Over a 12-year period I have been working on digital and print projects within the creative industry at a strategic, executive and production level. I have managed tasks of branding, UX design, UI design, web development, video production and photography. I have coordinated teams and carried out launches, marketing campaigns and assisted in communication strategies and business development. In brief I am a creative visual storyteller with a broad experience. Below you'll find a small collection of some of my work - take a look and feel free to <a href="#contact" class="bold color2"> share your opinion </a> with me.</div>
<div id="js-filters-masonry" class="cbp-l-filters-alignLeft">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> All
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".web-design" class="cbp-filter-item"> Web Design
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".graphic" class="cbp-filter-item"> Graphic
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".direct-response-marketing" class="cbp-filter-item"> Direct Response Marketing
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".construction" class="cbp-filter-item"> Construction
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".spatial-design" class="cbp-filter-item"> Spatial Design
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".photography" class="cbp-filter-item"> Photography
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".editorial" class="cbp-filter-item"> Editorial
<div class="cbp-filter-counter"></div>
</div>
<div data-filter=".video" class="cbp-filter-item"> Video
<div class="cbp-filter-counter"></div>
</div>
</div>
<div id="js-grid-masonry" class="cbp">
<div class="cbp-item web-design">
<a href="images/portfolio-case-01.jpg" class="cbp-caption cbp-lightbox" data-title="<p>Mobile and Desktop Website</p><p><a href='http://jonasroberts.dk/' target='_blank'>TAKE ME TO THE WEBSITE</a></p>">
<div class="cbp-caption-defaultWrap"> <img src="images/portfolio-case-01-thumbnail.jpg" alt="portfolio Malthe Stigaard"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">Personal Trainer Jonas Roberts</div>
<div class="cbp-l-caption-desc">Mobile and Desktop Website</div>
</div>
</div>
</div>
</a>
</div>
</section>
<section id="about">
<h1> ABOUT ME</h1>
<h2> WHAT I DO</h2>
<div id="cubepanel">
<div id="js-filters-tabs" class="cbp-l-filters-big">
<div data-filter=".tools" class="cbp-filter-item-active cbp-filter-item"> TOOLS I USE</div>
<div data-filter=".languages" class="cbp-filter-item"> WEB LANGUAGES</div>
<div data-filter=".media" class="cbp-filter-item"> PHOTOGRAPHY & VIDEO</div>
</div>
<div id="js-grid-tabs" class="cbp cbp-l-grid-tabs">
<div class="cbp-item tools"> For the past 10 years I have worked professionally with the Adobe Creative Suite. I am particularly experienced in Photoshop, Indesign, Premiere Pro and Bridge. I also have 5 years of professional experience with Final Cut Pro + extensions.</div>
<div class="cbp-item languages"> I have 2 years of experience in coding HTML 5 and CSS 3. I know JavaScript and jQuery to the extent that I can implement plugins in HTML, and apply basic adjustments.</div>
<div class="cbp-item media"> I have trained as a photographer and as a videographer. Within photography I have covered mostly event photography, product photography, architectural photography and artistic photography. My video productions include documentaries, art house films and company films, contributing as producer, director, camera operator and editor.</div>
</div>
</div>
<h2> CLIENTS & COLLABORATIONS</h2>
<p id="previous" class="copytext">OLYMPUS
<br>DANSK KOMMUNIKATIONSFORENING
<br>TNT ARKITEKTER
<br>GERRIT RIETVELD ACADEMIE
<br>MOTORIOUS
<br>RIETWOOD STICHTING
<br>PERSONLIG TRÆNER JONAS ROBERTS
<br>TRÆSKIBS SAMMENSLUTNING
<br>FATAMORGANA
<br>PLUS 2
<br>MONTH OF PERFORMANCE ART
<br>HOMEBASE LAB
<br>SERENITY
<br>BREAST FRIENDS
<br>DANSK ICYE
<br>M4 GASTATELIER
<br>PIONER
<br>START POINT PRIZE
<br>AIR ANTWERPEN
<br>MONDRIAAN FONDS
<br>ARBOR VITAE FOUNDATION
<br>DANSK KUNSTRÅD
<br>
</p>
</section>
<section id="spare">
<h1> IN MY SPARE TIME</h1>
<p class="copytext"> FITNESS OR SWIMMING AFTER WORK, KEEPING MYSELF UPDATED WITH WHAT'S GOING ON IN THE TECH WORLD. I LOVE A GOOD STORY, AS WELL AS GOOD MOVIES AND ART. I LIKE TO TRAVEL EUROPE TO VISIT FRIENDS WITHIN THE EUROPEAN CREATIVE COMMUNITY. AND I SPEND A CONSIDERABLE AMOUNT OF TIME THINKING ABOUT WORD DEFINITIONS AND LANGUAGES.</p>
</section>
<section id="contact">
<div class="content-wrapper">
<div class="vertical-align"> <img src="images/portrait-malthe-stigaard.jpg" alt="portrait Malthe Stigaard"></div>
<div class="vertical-align">
<h1> CONTACT</h1>
<p class="white"> I would love to hear from you, write me at <a href="mailto:ms@malthestigaard.com">ms@malthestigaard.com</a>
<br> and find me on <a href="https://www.facebook.com/malthe.stigaard">Facebook</a>, <a href="https://dk.linkedin.com/in/malthe-stigaard-32b2b246">LinkedIn</a> and <a href="https://www.instagram.com/malthestigaard/">Instagram</a>.</p>
</div>
</div>
</section>
<footer>
<p> © 2016 Malthe Stigaard</p>
</footer>
</div>
</body>
</html>
JAVASCRIPT：
<script type="text/javascript" src="cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script>
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
(function($, window, document, undefined) {
'use strict';
$('#js-grid-tabs').cubeportfolio({
filters: '#js-filters-tabs',
defaultFilter: '.tools',
animationType: 'fadeOut',
gridAdjustment: 'default',
displayType: 'default',
caption: '',
});
})(jQuery, window, document);
(function($, window, document, undefined) {
'use strict';
$('#js-grid-masonry').cubeportfolio({
filters: '#js-filters-masonry',
layoutMode: 'grid',
defaultFilter: '*',
animationType: 'slideDelay',
gapHorizontal: 20,
gapVertical: 20,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 1500,
cols: 4
}, {
width: 1100,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2,
options: {
caption: ''
}
}, {
width: 320,
cols: 1,
options: {
caption: ''
}
}],
caption: 'overlayBottom',
displayType: 'bottomToTop',
displayTypeSpeed: 100,
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
});
})(jQuery, window, document);
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#grid-container').cubeportfolio({});
});
</script>
<!-- Google Analytics tracking code -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34485670-1', 'auto');
ga('send', 'pageview');
</script>
答案 0 :(得分：0)
你可以这样做：
.card {
background-color: #3498db;
min-height: 200px;
min-width: 200px;
}
.caption {
visibility: hidden;
}
.card:hover .caption {
visibility: visible;
}
@media (max-width: 768px) {
.caption {
visibility:visible;
}
}<div class="card">
<div class="caption">
Hello this is a caption
</div>
</div>
:hover属性在没有:hover的情况下在您需要的媒体查询中重写。
答案 1 :(得分：0)
标题使用CSS定位在容器的底部，并且在悬停时更改bottom属性。您可以将底部设置为0（在媒体查询中），并且字幕将始终在视图中。
添加到您的CSS底部：
.cbp-caption-overlayBottom .cbp-caption-activeWrap { bottom: 0;}