将悬停更改为始终显示（标题）
[英]Change hover to always show (caption)
问题描述
I have a portfolio website 
我有一个投资组合网站
www.malthestigaard.com www.malthestigaard.com
where I am displaying some portfolio cases using the Cube Portfolio JavaScript plugin. 在这里，我使用Cube Portfolio JavaScript插件显示一些投资组合案例。 Each portfolio case has a caption connected to it that on a desktop shows at mouseover/hover. 每个投资组合案例都有一个与之相连的标题，该标题在桌面上在鼠标悬停/悬停时显示。 The problem is of course that when viewing my website on a mobile device there is no mouse to hover over the portfolio case and the caption remains hidden (as far as I can tell it hides the captions for specific screen sizes only, but as I am new to html and css I have a hard time figuring out where to find the right media queries and how to change them, plus I'm thinking it will benefit user experience if it just always shows). 问题是，当然，当在移动设备上查看我的网站时，没有鼠标悬停在投资组合的情况下，并且标题仍处于隐藏状态（据我所知，它仅针对特定屏幕尺寸隐藏了标题， html和css的新手，我很难弄清楚在哪里可以找到合适的媒体查询以及如何更改它们，而且我认为，如果它始终显示，它将对用户体验有所帮助。 So my question is, how can I change the css or javascript so that the caption always shows? 所以我的问题是，如何更改CSS或JavaScript，以便标题始终显示？
HTML: 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: 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>
2 个解决方案
解决方案1
0 2018-05-24 10:20:35
You can do it like this : 您可以这样做：
.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>
The :hover properties are re-write in the media querie that you want without the :hover . 该:hover性能重新写在你希望在无媒体querie :hover 。
解决方案2
0 已采纳 2018-05-24 10:21:57
The captions are positioned at the bottom of the container with CSS, and the bottom attribute is changed on hover. 标题通过CSS放置在容器的bottom ，并且悬停时更改了bottom属性。 You can set the bottom to 0(in your media queries) and the captions will always be in view. 您可以将底部设置为0（在媒体查询中），并且字幕始终会显示。
Add to the bottom of your css: 添加到您的CSS的底部：
.cbp-caption-overlayBottom .cbp-caption-activeWrap { bottom: 0;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
在图像悬停时显示轮播字幕 - Show Carousel caption on image hover
悬停时显示/隐藏图像标题 - Show/Hide Image Caption on hover
在悬停时隐藏图像标题并显示覆盖文字 - Hide image caption on hover and show overlay text
jQuery的悬停叠加字幕 - jquery hover overlay with caption
Javascript-悬停时显示/更改图像 - Javascript - Show/change image on hover
悬停中心文本上的图形标题 - figure caption on hover center text
引导程序中的缩略图标题悬停效果 - Thumbnail Caption hover effect in bootstrap
如何将下拉菜单显示从悬停更改为OnClick？ - How to change dropdown show from hover to OnClick?
如何显示带标题的滑块？ - How to show slider with caption?
在灯箱中更改字幕URL - Change Caption URL in Lightbox
相关标签