Question

我想知道是否有办法通过单击横幅本身来隐藏/扩展文本，因为这样可以进一步简化美学，而不使用任何拐杖。最好是，我想要一个没有Javascript参与的解决方案或指针。

以下是我迄今为止所做的事情：

如果可以实现点击横幅本身的功能，我将不胜感激，因为这是我真正希望它工作的方式，而不是使用+/-符号来表示所需的功能。

这是HTML：

<div id="rightwrapper"><div id="demo-afghan">


<img src="http://static.squarespace.com/static/533e6e38e4b0e0ebd52168da/t/53829a06e4b011aa8ac06155/1401068038613/afghan_general.png" 


class="hover" 
class="img:hover"


/></a>


<p class="text">Our sister page, dedicated to Afghan history. Services provided in English and in Dari and Pashto.</p>



<article class="larticle">
<details class="ldetails">
<summary class="lsummary"></summary>
<p>
<br>
 The history of Afghanistan is closely intertwined with that of Iran and the nations of Central Asia. With an eastern aspect towards India and China, Afghanistan was a cultural melting pot attesting to its multiethnic character. As a historic entity, Afghanistan comes into existence with the formation of the Hotaki dynasty; previously it had been part of a larger Iranian realm or ruled by foreign monarchs centered on the region's ancient Bactrian identity. 
<br>
<br>
 The banner portrays the Argali from the famous Tillya Tepe gold treasure.
 </p>
 </details>
 </article>



 </div>
 </div>

这是CSS：

/* EXPAND TRIANGLE START */
#leftexpand summary.lsummary:-webkit-details-marker {
color: 000;
display: none;
font-size: 125%;
margin-right: 2px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
height: 10px;
font-size: 20px;
overflow: hidden;
}
summary.lsummary:after {
background: transparent;
border-radius: 5px;
content:"+";
color: #000;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details.ldetails[open] summary.lsummary:after {
content:"-";
}
summary.lsummary:focus {
outline-style: none;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
article.larticle > details.ldetails > summary.lsummary {
color: transparent;
font-size: 18px;
margin-top: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails > p {
margin-left: 24px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails {
margin-left: 36px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
details.ldetails details.ldetails summary.lsummary {
font-size: 16px;
animation: fadein 3s;
-moz-animation: fadein 3s;
/* Firefox */
-webkit-animation: fadein 3s;
/* Safari and Chrome */
-o-animation: fadein 3s;
/* Opera */
}
@keyframes fadein {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes fadein {
/* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes fadein {
/* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}
/* EXPAND TRIANGLE END */

/* RIGHT CAPTION HOVER START */
#rightwrapper .text {
display: block;
position:relative;
text-align:right;
bottom:60px;
left:0px;
visibility:hidden;
background-color: rgba(255, 255, 255, 0.9);
top: -20px;
margin-bottom: -20px;
opacity: 0;
-webkit-transition: all 3000ms ease-out;
-moz-transition: all 3000ms ease-out;
-o-transition: all 3000ms ease-out;
-ms-transition: all 3000ms ease-out;
transition: all 3000ms ease-out;
}
#rightwrapper:hover .text {
visibility:visible;
opacity: .5;
}
/* RIGHT CAPTION HOVER END */

/* IMAGE ROLLOVER AFGHAN START */
#demo-afghan img {
opacity: .1;
background-color: #ffffff;
-webkit-transition: opacity, background-color .5s ease-out;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
#demo-afghan img:hover {
opacity: 1;
background-color: #bf0000;
-webkit-transition: opacity, background-color 1s ease-in;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 2000ms;
}
/* IMAGE ROLLOVER AFGHAN END */

但是，为了简单起见，我建议您在我提供的jsfiddle中阅读代码。我希望有一个可能的解决方案。

事先谢谢。

Answer 1

这是一个使用Javascript但非常简单的解决方案。将要隐藏/显示的文本换行到带有ID的div（我使用了ID text），然后将此代码添加到您的图片中：

onclick="document.getElementById('text').style.display = (document.getElementById('text').style.display != 'none') ? 'none' : 'inline';"

这是fiddle。

单击图像隐藏/展开文本（CSS3 / HTML5）

1 个答案: