文章/答案/技术大牛

发布

社区首页 >问答首页 >将悬停更改为始终显示(标题)

问将悬停更改为始终显示(标题)
EN

Stack Overflow用户

提问于 2018-05-24 10:12:07

回答 2查看 878关注 0票数 2

我有一个投资组合网站

www.malthestigaard.com

在这里，我显示了一些组合案例使用Cube插件。每个组合案例都有一个标题连接到它，在桌面上显示鼠标/悬停。当然，问题是，当我在移动设备上查看我的网站时，没有鼠标可以悬停在投资组合案例上，而且标题仍然是隐藏的(据我所知，它只隐藏特定屏幕大小的标题，但由于我对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 &#38; 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&#39;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&AElig;NER JONAS ROBERTS 
                <br>TR&AElig;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&Aring;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> &#169; 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>

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-24 10:21:57

标题使用CSS定位在容器的底部，bottom属性在悬停时被更改。您可以将底部设置为0(在媒体查询中)，并且标题将始终在视图中。

将css添加到底部：

.cbp-caption-overlayBottom .cbp-caption-activeWrap { bottom: 0;}

票数 0

Stack Overflow用户

发布于 2018-05-24 10:20:35

你可以这样做：

.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的情况下在媒体查询中重写的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50506653

复制

相似问题

问将悬停更改为始终显示(标题)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将悬停更改为始终显示(标题)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将悬停更改为始终显示(标题)
EN