Javascript 如何在鼠标悬停时对齐div中心的图像

这是我的

jsfiddle

。我想将鼠标悬停在主

div（类框）

中心的

图像（Facebook、Twitter）

（最初它们将被隐藏）和我的

div（类框）

的不透明度对齐到

0.1

我可以只使用CSS来管理它，还是必须为此编写一些

Js

代码

@导入url(http://fonts.googleapis.com/css?family=Open+Sans）；
正文{
字体系列：“开放式Sans”，无衬线；
颜色：#666；
}
/*结构*/
#换页{
填充物：5px；
宽度：960px；
保证金：20px自动；
}
标题{
高度：100px；
填充：0 15px；
}
#内容{
宽度：290px；
浮动：左；
填充：5px15px；
}
#中间的{
宽度：294px；/*占页边距+边框值*/
浮动：左；
填充：5px15px；
保证金：0px 5px 5px 5px；
}
#边栏{
宽度：270px；
填充：5px15px；
浮动：左；
}
页脚{
明确：两者皆有；
填充：0 15px；
}
/************************************************************************************
媒体查询
*************************************************************************************/
/*对于980px或更低*/
@媒体屏幕和屏幕（最大宽度：980px）{
#换页{
宽度：94%；
}
#内容{
宽度：41%；
填充：1%4%；
}
#中间的{
宽度：41%；
填充：1%4%；
保证金：0px 0px 5px 5px；
浮动：对；
}
#边栏{
明确：两者皆有；
填充：1%4%；
宽度：自动；
浮动：无；
}
页眉、页脚{
填充：1%4%；
}
}
/*对于700px或更低*/
@媒体屏幕和屏幕（最大宽度：600px）{
#内容{
宽度：自动；
浮动：无；
}
#中间的{
宽度：自动；
浮动：无；
左边距：0px；
}
#边栏{
宽度：自动；
浮动：无；
}
}
/*对于480px或更低*/
@媒体屏幕和屏幕（最大宽度：480px）{
h1{
字号：2em；
}
#边栏{
显示：无；
}
}
#内容{
/*背景：#f8f8*/
}
#边栏{
/*背景：#f0efeff*/
}
标题、#内容、#中间、#侧边栏{
边缘底部：5px；
}
#换页、页眉、内容、中间、侧边栏、页脚{
/*边框：实心1px#ccc*/
}
.1{
浮动：左；
宽度：100%；
/*背景色：#D9DFD8*/
高度：50px；
文本对齐：对齐；
文本对齐：词间对齐；
/*左侧填充：.5cm*/
填料顶部：.5cm；
边框样式：实心；
边框宽度：1px 1px 0px 1px；
}
.2{
浮动：左；
清除：左；
/*背景色：#中交*/
宽度：100%；
高度：50px；
填料顶部：.2cm；
边框样式：实心；
边框宽度：0px 1px 1px；
}
.输出1{
浮动：左；
宽度：33%；
背景色：#D9DFD8；
高度：50px；
文本对齐：对齐；
文本对齐：词间对齐；
左侧填充：.5cm；
填料顶部：.5cm；
}
.输出2{
浮动：左；
清除：左；
背景色：#中交；
宽度：33%；
高度：50px；
填料顶部：.2cm；
}
.左跨{
左侧填充：.2cm；
}
.右跨{
左侧填充：130像素；
}
.按钮{
字体系列：tahoma；
字号：8pt；
线高：12px；
右边距：5px；
边际上限：0；
位置：绝对位置；
左边距：-10px；
}
.社区{
边缘顶部：15px；
左边距：15px；
位置：绝对位置；
排名：0；
右：8；
}
#输出箱{
显示：无；
}
#主包装{
/*背景色：#D9D9D9*/
}
#左侧边栏{
背景色：#d2d2d2；
边框样式：实心；
边框宽度：1px 0px 1px 1px；
}
#内容包装{
/*背景色：#C5C5*/
边框样式：实心；
边框宽度：1px 0px 1px 1px；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
-webkit对齐内容：中心；
对齐内容：居中对齐；
}
/*尺寸*/
#主包裹>分区{
最小高度：100px；
}
#主包裹>分区{最小高度：100px；}
/*布局*/
#主包装{
/*溢出以处理内部浮动块*/
溢出：隐藏；
}
#左侧边栏{
浮动：左；
宽度：30%；
}
#内容包装{
浮动：左；
宽度：50%；
} 
#右侧边栏{
浮动：对；
宽度：20%；
/*背景色：#C5C5*/
边框样式：实心；
边框宽度：1px 1px 1px 0px；
位置：相对位置；
} 
.底部内容{
位置：绝对位置；
底部：0；
右：5；
}
.container项{显示：块；边距：5px 0；}
.box:悬停{
不透明度：0.2
}

2列响应式布局
第一类
2016年10名客户
Cat1_2
2016年10名客户
Cat1_3
2016年10名客户
Cat2_1
2016年10名客户
Cat2_2
2016年10名客户
Cat2_3
2016年10名客户
页脚
页脚文本

请参见此处：

您可以使用

position:absolute

添加了以下代码：

.box div:last-child {
  position:absolute;
  top:45%;
  left:0;
  right:0;
  margin:0 auto;
  text-align:center;
  transition:0.3s;
  opacity:0;
}
.box {
  position:relative;
  display:inline-block;
}
.box:hover div:last-child{
  opacity:1;
}

.box:hover div:not(:last-child) {
  opacity:0.2;
}

从代码中删除了

框：hover{opacity:0.2}

，因为这使得所有内容（包括图像）都将不透明度设置为0.2悬停

---

有更多的方法可以做到这一点。这只是解决方案之一。让我知道它是否有效

用这个替换你的

.box

div：

<div class="box" >
  <div class="inner1" style="border-left: thick double #ff0000;">
     <span class="left-span">Cat1_2</span>
  </div>
  <div class="inner2" style="border-left: thick double #ff0000;">
     <span class="left-span">10 Customers</span>
     <span class="right-span">2016</span>
  </div>
  <div class="center hidden">
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"   />
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
  </div>
</div>

---

为包含图像的div（如images）输入类名

<div class="box">

    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_1</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div class="images">                                 
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>

</div>

---

只需要添加CSS bellow并向图像包装器添加一个类

---

你可以用CSS来管理它。。。请在这里包括相关代码。我已经添加了

jsfiddle

您是一位有经验的SO用户。。。你必须知道你的问题必须是强有力的，没有任何外部链接。如果链接断开，那么问题就会出现

<div class="box">

    <div class="inner1" style="border-left: thick double #ff0000;"><span class="left-span">Cat1_1</span></div>
    <div class="inner2" style="border-left: thick double #ff0000;"><span class="left-span">10 Customers</span><span class="right-span">2016</span></div>
    <div class="images">                                 
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/t_small-a.png"    />
      <img src="http://www.islandcarcentre.co.uk/wp-content/uploads/2016/03/icon-small-facebook.png" />
    </div>

</div>

  .box{
        position: relative;
        display: inline-block;
    }

  .box .images{
    display: none;
    position: absolute;
    left: 40%;
    top: 40%;
  }


  .box:hover .images{
    display: inline-block;
    cursor: pointer;
  }

  .box:hover .inner1, .box:hover .inner2{
    opacity: 0.1;
  }

.inner-img {
    display: none;
    position: absolute;
    margin-top: 105px;
    margin-left: 135px;
}
.box:hover .inner-img {
    display: block!important;
    opacity:1;
}
.box:hover div:not(.inner-img) {
  opacity:0.2;
}