jquery - 在图像顶部打字会干扰图像的悬停状态

Question

我完全迷失了。当您将鼠标悬停在各自的图像上时，我试图在视口(viewport)中心显示我的每个元素的标题。我通过 jQuery 执行此操作，因为它似乎是最直接的方法，但如果有更简单的方法，那么我会洗耳恭听。

我尝试添加到 jQuery 以防止图像在悬停在类型上时返回完全不透明，并尝试为“元素显示名称”类的 css 找到某种透明度属性无济于事。

我觉得它是非常小的东西还是非常基本的东西，但我不确定是哪一个。有人有什么建议吗？

非常感谢任何帮助!

这是有问题页面的工作演示，http://staging.lukasyonis.com/projects/allprojects.html

		$(document).ready(function() {

    $('.project').ready(function() {
        $(this).find('.project-display-name').hide();
    });

    $('.project').hover(function() {
        $(this).find('.project-display-name').fadeIn(100);
    }, function() {
        $(this).find('.project-display-name').fadeOut(125);
    });

    $('.project-link').hover(function() {
        $(this).data('title', $(this).attr('title')).removeAttr('title');
    }, function() {
        $(this).attr('title', $(this).data('title'));
    });
});

	

#buttons {
	z-index:11;
	position:fixed;
	float:left;
	bottom:0;
	margin-bottom:1.75em;
	display:inline;
}


#buttons ul li { 
	list-style-type:none;
	display:inline;
	color: #000;
	line-height:1.25em;	
	text-align:left;
	float:left;
    font-family: "apercuregular", "Helvetica Neue", Helvetica, sans-serif;
    font-size:100%;
}

#buttons li#next {
	float:right;
}


#buttons ul li a {
	display:block;
}	


#thumbnail {
	margin-top:6.5em;
}

#thumbnail img {
	margin-bottom:1%;
	margin-left:3%;
	width:97%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

#thumbnail img:last-of-type {
	margin-bottom:0;
}

#copy #head {
	font-family:"apercuregular", Helvetica, Arial;
	line-height:1.25em;
}

#copy #sub {
	font-family:"aperculight_italic", Helvetica, Arial;
	line-height:1.25em;
}


#copy #bold {
	font-family:"aperculight", Helvetica, Arial;
	line-height:1.25em;
}	

#copy {
	position:fixed;
	margin-top:6.5em;
	font-family:"aperculight", Helvetica, Arial;
	line-height:1.25em;
	margin-left: 1.75em;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}


#project-container {
	margin-top:6.5em;
}

#project01 img, #project02 img, #project03 img, #project04 img, #project05 img, #project06 img, #project07 img, #project08 img {
	transition:opacity .3s ease;
	opacity: 1;
}

#project01 img:hover, #project02 img:hover, #project03 img:hover, #project04 img:hover, #project05 img:hover, #project06 img:hover, #project07 img:hover, #project08 img:hover, .project-display-name:hover {
	opacity: .3;
}

.project:hover .project-display-name {
	opacity: 1;
}

.project-display-name {
	position: fixed;
	z-index: 10000000;
	font-family: "fugueregular", Helvetica, Arial;
	font-size:7em;
	line-height: 1.125em;
	text-align: center;
	color: #000;
	width: 90%;
  	top: 50%;
  	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
}
	
#project01 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;      
}


#project02 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
    -webkit-animation
}

#project03 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

#project04 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

#project05 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}


#project06 img {
	z-index:100;
	width:100%;
	margin-bottom:3.75%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}


#project07 img {
	z-index:100;
	width:100%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

#project08 img {
	z-index:100;
	width:100%;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

#project09 img {
	z-index:100;
	width:100%;
}

#project10 img {
	z-index:100;
	width:100%;
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

<div class="section d-show d-showgrid">

    <header id="header" class="d-all box">
        <span id="inner-head" class="d-all box">
                        <article id="logomark" class="d1 box">
                            <a href="../index.html"><img src="../images/LogoBlue_x2.svg" alt="logo" /></a>
                        </article>


                        <article id="menu" class="d10-d12 box">
                            <ul id="nav">
                                <li id="practice"><a href="../practice.html">profile</a></li>
                                <li id="past"><a href="allprojects.html">work</a></li>
                            </ul>
                        </article>
                    </span>
    </header>

    <article id="project-container" class="d-all box">
        <article id="project01" class="d1-d6 box project">
            <a class="project-link" href='2014/art-science.html' title='The Art &amp; Science Series'>
                <img src="../images/work/2014/art-science/Scene_02.jpg" alt="art-science" />
                <figcaption class="project-display-name">
                    <p>forum studio:
                        <br />the art &amp; science series</p>
                </figcaption>
            </a>
        </article>
        <article id="project02" class="d7-d12 box project">
            <a class="project-link" href='2014/shadia-ghantous.html' title='Shadia Ghantous'>
                <img src="../images/work/2014/shadia-ghantous/Scene_08.jpg" alt="shadia" />
                <figcaption class="project-display-name">
                    <p>shadia ghantous</p>
                </figcaption>
            </a>
        </article>
        <article id="project03" class="d1-d6 box project">
            <a class="project-link" href='2014/gojo.html' title='Gojo Contractors and Developers'>
                <img src="../images/work/2014/gojo/Scene_04.jpg" alt="gojo" />
                <figcaption class="project-display-name">
                    <p>gojo contractors and developers</p>
                </figcaption>
            </a>
        </article>
        <article id="project04" class="d7-d12 box project">
            <a class="project-link" href='2013/arkitekt.html' title='Arkitekt 29'>
                <img src="../images/work/2013/arkitekt/Scene_02a.jpg" alt="arkitekt" />
                <figcaption class="project-display-name">
                    <p>arkitekt 29</p>
                </figcaption>
            </a>
        </article>
        <article id="project05" class="d1-d6 box project">
            <a class="project-link" href='2012/mayday.html' title='May Day 2012'>
                <img src="../images/work/2012/mayday/Scene_01.jpg" alt="mayday" />
                <figcaption class="project-display-name">
                    <p>may day 2012</p>
                </figcaption>
            </a>
        </article>
        <article id="project06" class="d7-d12 box project">
            <a class="project-link" href='2014/lukasyonis.html' title='Lukas Yonis'>
                <img src="../images/work/2014/lukasyonis/Scene_11.jpg" alt="lukasyonis" />
                <figcaption class="project-display-name">
                    <p>lukas yonis</p>
                </figcaption>
            </a>
        </article>
        <article id="project07" class="d1-d6 box project">
            <a class="project-link" href='2012/eternals.html' title='The Eternals Espiritu Zombi Group at The Hideout'>
                <img src="../images/work/2012/eternals/Scene_01.jpg" alt="eternals" />
                <figcaption class="project-display-name">
                    <p>the eternals espiritu zombi group at the hideout</p>
                </figcaption>
            </a>
        </article>
        <article id="project08" class="d7-d12 box project">
            <a class="project-link" href='2013/rarariot.html' title='Ra Ra Riot at Metro Chicago'>
                <img src="../images/work/2013/rarariot/Scene_01.jpg" alt="rarariot" />
                <figcaption class="project-display-name">
                    <p>ra ra riot at metro chicago</p>
                </figcaption>
            </a>
        </article>
        <article id="project09" class="d1-d6 box project">

        </article>
    </article>

Answer 1

不确定我是否理解你的问题，但尝试使用这个:

.project-display-name, .project-display-name p {
     pointer-events: none;
 }