Css悬停改变另一个元素css

时间：2015-01-22 03:12:08

标签： html css css3

如何在悬停时更改其他元素css？

据我所知，~能够在:hover之后执行此操作，我需要的是.shopthumb_gallery ul li img:hover，.shopthumb_gallery_name同时放宽到相同宽度的对齐底部。

＆＃13;
＆＃13; 
.shopthumb_wrapper {
	width:auto;
	margin: 0 auto;
}

.shopthumb_gallery {
	margin-top: 30px;
}

.shopthumb_gallery ul {
	list-style-type: none;
	margin-left: 35px;
}

/* animation */
.shopthumb_gallery ul li, .shopthumb_gallery li img {
	-webkit-transition: all 0.1s ease-in-out;
  	-moz-transition: all 0.1s ease-in-out;
  	-o-transition: all 0.1s ease-in-out;
  	transition: all 0.1s ease-in-out;
}

.shopthumb_gallery ul li {
	position: relative;
	float: left;
	width: 130px;
	height: 130px;
	margin: 5px;
	padding: 5px;
	z-index: 0;
	cursor:pointer;
}

/* Make sure z-index is higher on hover */
/* Ensure that hover image overlapped the others */
.shopthumb_gallery ul li:hover {
	z-index: 5;
}

/* Image is position nicely under li */
.shopthumb_gallery ul li img {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #dddddd;
	padding: 5px;
	width: 130px;
	height: 130px;
	background: #f0f0f0;
}

.shopthumb_gallery ul li img:hover {
	width: 200px;
	height: 200px;
	margin-top: -130px;
	margin-left: -130px;
	top: 65%;
	left: 65%;
	text-overflow:none;
}


.shopthumb_gallery_name{
	position:absolute;	
	background:#444;
	opacity:0.8;
	color:#fff;
	font-family: 'Raleway';
	padding:5px;
	font-size:12px;
	bottom:3%;
	width: 120px;
	margin-left:1px;
	overflow: hidden;
    text-overflow: ellipsis; 
}
＆＃13; 
<div class="shopthumb_wrapper">
                <div class="shopthumb_gallery">
                    <ul>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
                        	<label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                        <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
                        	<label class="shopthumb_gallery_name">Name</label>
                        </li>
                    </ul>
                </div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

鉴于您提供的HTML，在这种情况下，任何一个组合器（+ / ~）都可以使用。

值得指出的是~是general sibling combinator，它会选择所有后续的兄弟元素。而+是adjacent sibling combinator，只会选择后续的相邻兄弟。

使用以下任一方法：

.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
}

.shopthumb_gallery ul li img:hover ~ .shopthumb_gallery_name {
}

我选择了第二个选择器，因为它可能更具未来性（假设标记要改变，标签不再是相邻的兄弟）。

＆＃13;
＆＃13; 
.shopthumb_wrapper {
  width: auto;
  margin: 0 auto;
}
.shopthumb_gallery {
  margin-top: 30px;
}
.shopthumb_gallery ul {
  list-style-type: none;
  margin-left: 35px;
}
.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.shopthumb_gallery ul li {
  position: relative;
  float: left;
  width: 130px;
  height: 130px;
  margin: 5px;
  padding: 5px;
  z-index: 0;
  cursor: pointer;
}
/* Make sure z-index is higher on hover */

/* Ensure that hover image overlapped the others */

.shopthumb_gallery ul li:hover {
  z-index: 5;
}
/* Image is position nicely under li */

.shopthumb_gallery ul li img {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #dddddd;
  padding: 5px;
  width: 130px;
  height: 130px;
  background: #f0f0f0;
}
.shopthumb_gallery ul li img:hover {
  width: 200px;
  height: 200px;
  margin-top: -130px;
  margin-left: -130px;
  top: 65%;
  left: 65%;
  text-overflow: none;
}
.shopthumb_gallery_name {
  position: absolute;
  background: #444;
  opacity: 0.8;
  color: #fff;
  font-family: 'Raleway';
  padding: 5px;
  font-size: 12px;
  bottom: 3%;
  width: 120px;
  margin-left: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
  bottom: -25px;
  color: red;
}
＆＃13; 
<div class="shopthumb_wrapper">
  <div class="shopthumb_gallery">
    <ul>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png">
        <label class="shopthumb_gallery_name">NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
      <li>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png">
        <label class="shopthumb_gallery_name">Name</label>
      </li>
    </ul>
  </div>
＆＃13;
＆＃13;
＆＃13;

作为旁注，我通过添加其他选择器将转换添加到label元素：

.shopthumb_gallery ul li,
.shopthumb_gallery li img,
.shopthumb_gallery li label {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

我还使用bottom: -25px将label元素与底部对齐。这是一个硬编码的值，但你可以通过改变一些事情来避免它。

.shopthumb_gallery ul li img:hover + .shopthumb_gallery_name {
  bottom: -25px;
}
相关问题
最新问题