悬停在第一个 div 上时需要将悬停应用到第二个 div

Question

CSS:

#content-items .thumb-artist img {
width: 220px;
position: relative;
z-index: 10;
height: 147px;
}

#filter-artist {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 25px 0 25px 10px;
position: relative;
font-weight: bold;
color: #666666;
text-transform: uppercase;
float: left;
width: 100%;
line-height: 1.4em;

}

#filter-artist #s {
border: 0;
font-size: 10px;
color: #666666;
background: transparent;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding: 1px 0px;
width: 80%;
}

#content-items {
width: 960px;
margin: 0 auto;
color: #fff;
}

#filter-artist span {
float: left;
}

#filter-artist a {
color: #666666;
padding: 0 8px;
float: left;
}

.active-filter {
color: #fff!important;
}

#filter-artist #submit {
background-image: url(img/icons.png);
background-position: -84px 0px;
background-color: transparent;
border: 0;
height: 14px;
line-height: 0;
padding: 0;
width: 14px;
float:right;
}

#filter-artist > p {display:none;}

#filter-artist form {
float: left;
border-bottom: 1px solid #666666;
}

#filter-artist #submit:hover {
background-image: url(img/icons.png);
background-position: -84px -14px;
}

#content-items .artist {
width: 25%;
float: left;
padding: 0 1% 40px 1%;
line-height: 1em;
height: 270px;
height: 190px!important;
}

#content-items .thumb-artist {
position: relative;
}

.thumb-artist img:hover .social-content {
opacity:1;
}

#content-items .artist h3 {
font-size: 18px;
margin: 10px 0;
line-height: 1em;
color: #fff;
font-family: "futura-pt",sans-serif;
}
}

element.style {
display: none;
}

#load-items .social-content {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-out;
}


.social {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 1em;
display: inline-block;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
line-height: 11px;
margin-right: 4px;
}

.facebook {
position:relative;
background-image: url(img/icons.png);
background-position: -3px -1px;
width: 20px;
height: 20px;
padding: 5px;
z-index:15;
float:left;
}

.web {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
float:left;
}

.sat-color {
background-color: #ff0033;
padding: 5px;
}

.social-content a:hover {
color: #ff3333;
}

.twitter {
position:relative;
background-image: url(img/icons.png);
background-position: -45px -1px;
width: 20px;
height: 20px;
padding: 5px;
float:left;
}

#load-items .social-content:hover {
position: absolute;
top: 80%;
left: 0%;
z-index: 15;
width: 100%;
text-align: center;
opacity:1;
}

.sat-color:hover {
background-color: #ff3333;
color: #fff !important;
}

HTML:

<article id="content-items">
<div id="filter-artist">
<span>FILTER:</span> 
<a href="http://downunderlabelgroup.com/artists">ALL</a><a href="http://downunderlabelgroup.com/artists-newest" class="active-filter">NEWEST</a><a href="http://downunderlabelgroup.com/artists-alphabetical">ALPHABETICAL</a></div>
<div id="load-items">

            <div class="artist">

            <div class="thumb-artist">

            <img width="300" height="138" src="http://downunderlabelgroup.com/wp-content/uploads/2013/03/k_oconnor_lge-300x138.jpg" class="attachment-medium wp-post-image" alt="Kim O'Connor">            

           <span class="social-content">

            <a href="https://www.facebook.com/TroyeSivan" class="facebook social" target="_blank">&nbsp;</a>

            <a href="https://twitter.com/TroyeSivan" class="twitter social" target="_blank">&nbsp;</a>

            <a href="http://troyesivan.com/" class="web social sat-color" target="_blank">OFFICIAL SITE</a>

            </span>

            </div>

           <h3 class="name-artist">Troye Sivan</h3>

            </div></div></article>

目前只有当鼠标悬停在社交内容上时才会应用悬停效果。我想把它应用到整个画面。

因此，如果有人将鼠标悬停在图像上，就会显示社交内容。

非常感谢。

Answer 1

有 2 个选项，1 悬停在 div，2 悬停在 img

第一个选项（推荐）：

#content-items .thumb-artist:hover .social-content {
   opacity: 1;
}

第二个选项（使用 + 下一个选择器）：

#content-items .thumb-artist .wp-post-image:hover + .social-content {
    opacity: 1;
}

演示：http://jsfiddle.net/7w8spct6/

Answer 2

也许这样的 CSS 规则可行

img.attachement-medium:hover + .social-content {
    position: absolute;
    top: 80%;
    left: 0%;
    z-index: 15;
    width: 100%;
    text-align: center;
    opacity:1;
}

但更好的方法是实际获取所需的 <img> 和 <span> 元素并将它们放入新的 <div> 中，然后对<div>

<div class="wrapper">
     <img width="300" height="138" src="http://downunderlabelgroup.com/wp-content/uploads/2013/03/k_oconnor_lge-300x138.jpg" class="content attachment-medium wp-post-image" alt="Kim O'Connor">            

       <span class="social-content content">

        <a href="https://www.facebook.com/TroyeSivan" class="facebook social" target="_blank">&nbsp;</a>

        <a href="https://twitter.com/TroyeSivan" class="twitter social" target="_blank">&nbsp;</a>

        <a href="http://troyesivan.com/" class="web social sat-color" target="_blank">OFFICIAL SITE</a>

        </span>
</div>

.wrapper:hover .content {
    /*styles*/    }

悬停在第一个 div 上时需要将悬停应用到第二个 div

Need to apply hover to 2nd div when hover over 1st div

html

css

hover