Question

我是HTML和CSS的新手，并尝试过研究这个问题，但找不到任何有用的东西。当鼠标悬停在每张图片上时，我只想要一个简单的单词出现。例如，第一张照片会在照片上或正下方显示“旅行”一词。

这是HTML：

div class="section group">
    <div class="col span_1_of_4">
    <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/travel.html"> <img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/travel01.png" alt="View travel photography" height="200"></a>
    </div>
    <div class="col span_1_of_4">
    <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/wedding.html"> <img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/weddings01.png" alt="View wedding collection" height="200"></a>
    </div>
    <div class="col span_1_of_4">
    <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/people.html"><img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/people01.png" alt="View people photography" height="200"></a>
    </div>
    <div class="col span_1_of_4">
    <a href="http://me14ch.leedsnewmedia.net/portfolio/sub%20pages/studio.html"><img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/studio01.png" alt="View studio photoshoot" height="200"></a>
    </div>
</div>

这就是CSS

    /*  SECTIONS  */
.section {
    clear: both;
    padding-left:7px;
}


/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
}
.span_2_of_4 {
    width: 49.2%;
}
.span_1_of_4 {
    width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

Answer 1

添加

title="travel"

将使用浏览器的默认工具提示显示。例如，

<img src="http://me14ch.leedsnewmedia.net/portfolio/portfolioresources/travel01.png" alt="View travel photography" height="200" title="travel">

如果您想要更多控制权，请查看jQueryUI's tooltip widget

Answer 2

管理在@Ixe的帮助下弄明白。通过使用div类类别，我能够将“a”属性与页面上的其他部分分开。这个效果对我来说使文字出现在照片上方并使照片向下推。显然，您可以将此效果调整为更光滑的外观。

<强> HTML

<div class="col span_1_of_4">
    <a href="sub pages/wedding.html"><div class="category"><h2>Wedding</h2></div><img src="portfolioresources/weddings01.png" alt="View wedding collection" height="200"></a>
    </div>

<强> CSS：

.category {
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    color: #FADBC8;
    position:relative;

}
.category a {
  display: block;
  position: relative;
  float: left;

}

a div {
  position: absolute;
  top: 0;
  display: none;
}

a:hover div {
  display:block;
}

Answer 3

您可以使用:hover pseudo-class来显示/隐藏元素：

<a href="#">
    <div>Travel</div>
    <img src="http://placehold.it/100x100" />
</a>

CSS：

a {
  display: block;
  position: relative;
  float: left;
}

a div {
  position: absolute;
  top: 0;
  display: none;
}

a:hover div {
  display: block;
}

http://jsfiddle.net/cnyxqc41/

当我将鼠标悬停在每个图像上时，如何显示单词？

3 个答案: