Question

我现在正忙着制作我正在为之工作的公司的网站。我正在制定公司活动的时间表。这就是我的问题：我似乎无法在图像和文本上触发悬停效果，除非我只悬停在图像本身上。

以下是我现在使用HTML的地方：

<body><center>
<div class="container" style="overflow:auto; padding: 1em;">
<div class="timeline">
<div class="timeline-item">
<div class="year">2014<span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
<div class="timeline-item">
<div class="year"><span class="marker"><span class="dot"></span></span></div>
<div class="info"><img src="sourceOfPicture.png" /><br/>
ACTIVITY INFORMATION HERE</div>
</div>
</div>
</div></center>

这是我的css：

    <style>
div {
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}
.timeline {
    width: 400px;
}
.timeline .timeline-item {
    width: 100%;
}
.timeline .timeline-item .info, .timeline .timeline-item .year {
    color: #eee;
    display: block;
    float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
    color: #ccc;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.timeline .timeline-item .year {
    font-size: 24px;
    font-weight: bold;
    width: 22%;
}
.timeline .timeline-item .info {
    width: 100%;
    width: 78%;
    margin-left: -2px;
    padding: 0 0 40px 35px;
    border-left: 4px solid #aaa;
    font-size: 14px;
    line-height: 20px;
}
.timeline .timeline-item .marker {
    background-color: #fff;
    border: 4px solid #aaa;
    height: 20px;
    width: 20px;
    border-radius: 100px;
    display: block;
    float: right;
    margin-right: -14px;
    z-index: 2000;
    position: relative;
}
.timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
    color: #444;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
    color: #0F8DC7;
}
.timeline .timeline-item .marker .dot {
    background-color: white;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    display: block;
    border: 4px solid white;
    height: 12px;
    width: 12px;
    border-radius: 100px;
    float: right;
    z-index: 2000;
    position: relative;
}
.timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    background-color: #0F8DC7;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}
img{
    transition: all 1s ease;
    opacity: 0.2;
    filter: alpha(opacity=20);
}
img:hover{
    position: relative;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
</style>

希望你们能帮助我。谢谢！

Answer 1

首先，如果您使用HTML5，则中心标记已过时，请使用固定宽度和margin:0px auto的div包装器将div居中。在我的情况下，它是div.container

div.container {
     width:1000px;
     margin:0px auto; /* instead of 0px choose ur own margin top and bottom */
}

在悬停时间轴项目div时为img设置动画，您可以通过将其分配更改为时间轴项目中的img来编辑最后一部分img:hover { [...] }：悬停并向其添加转换：

.timeline .timeline-item.active .info, .timeline .timeline-item:hover .info img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    position: relative;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

适合我，用铁/铬38进行测试。

不会同时悬停图像和所选项目

1 个答案: