Fatal编程技术网
  • javascript/
  • Javascript 对图像和选定项目没有同时悬停效果

Javascript 对图像和选定项目没有同时悬停效果

javascript html css

Javascript 对图像和选定项目没有同时悬停效果,javascript,html,css,Javascript,Html,Css,我现在正忙着为我工作的公司制作网站。我正在为公司的活动制定时间表。我的问题是：我似乎无法在图像和文本上触发悬停效果，除非我只在图像本身上悬停 下面是我现在使用HTML的位置： <body><center> <div class="container" style="overflow:auto; padding: 1em;"> <div class="timeline"> <div class="timeline-item"> <d

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

下面是我现在使用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>


2014


活动信息在此


活动信息在此


活动信息在此


活动信息在此


活动信息在此


活动信息在此
以下是我的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>


div{
字体系列：Helvetica、Arial、无衬线字体；
框大小：边框框；
}
.时间表{
宽度：400px；
}
.时间表.时间表项目{
宽度：100%；
}
.timeline.timeline item.info、.timeline.timeline item.year{
颜色：#eee；
显示：块；
浮动：左；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
过渡：所有的1容易；
}
.timeline.timeline-item.close.info、.timeline.timeline-item.close.year{
颜色：#ccc；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
过渡：所有的1容易；
}
.时间线.时间线项目.年份{
字体大小：24px；
字体大小：粗体；
宽度：22%；
}
.timeline.timeline项目.info{
宽度：100%；
宽度：78%；
左边距：-2px；
填充：0 0 40px 35px；
左边框：4px实心#aaa；
字体大小：14px；
线高：20px；
}
.timeline.timeline项。标记{
背景色：#fff；
边框：4px实心#aaa；
高度：20px；
宽度：20px；
边界半径：100px；
显示：块；
浮动：对；
右边距：-14px；
z指数：2000；
位置：相对位置；
}
.timeline.timeline-item.active.info、.timeline.timeline项目：hover.info{
颜色：#444；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
过渡：所有的1容易；
}
.timeline.timeline-item.active.year、.timeline.timeline项目：悬停.year{
颜色：#0F8DC7；
}
.时间线.时间线项目.标记.点{
背景色：白色；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
过渡：所有的1容易；
显示：块；
边框：4倍纯白；
高度：12px；
宽度：12px；
边界半径：100px；
浮动：对；
z指数：2000；
位置：相对位置；
}
.timeline.timeline-item.active.marker.dot.timeline.timeline项目：悬停.marker.dot{
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
过渡：所有的1容易；
背景色：#0F8DC7；
盒影：插入1px 1px 2px rgba（0,0,0,0.2）；
}
img{
过渡：所有的1容易；
不透明度：0.2；
过滤器：α（不透明度=20）；
}
img：悬停{
位置：相对位置；
不透明度：1.0；
过滤器：α（不透明度=100）；
}
希望你们能帮我。谢谢

首先，如果你使用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:hover{[…]}
，方法是在时间线项目：hover中更改其对img的赋值，并向其添加过渡：

.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测试。

仅在文本上悬停时对我来说（铬）很好。-不确定问题出在哪里，但您是否尝试过引用
.info:hover
？