Div表格悬停更改页面颜色而不仅仅是div

时间：2015-12-10 09:24:40

标签： html hover

对不起，我会在这里再次发布代码。 我使用div来制作一个表格，一个单元格在悬停时更改背景颜色。 但是当鼠标悬停在一个单元格上时，页面的背景会改变而不仅仅是那个div单元格。 此外，表格不是浏览器的100％宽度。

请帮帮我。

    .container {
    border-collapse:collapse;
    <!--background-color: salmon;-->
    width: 100%;
    display: table;
}

.row {
    display: table-row;
    
}

.cell1 {
    display: table-cell;
    padding: 10px;
	border-bottom: 1px solid black;
}
.cell2 {
    display: table-cell;
    padding: 10px;
    border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
.cell3 {
    display: table-cell;
    padding: 10px;
	border-bottom: 1px solid black;
}
.cell4 {
    display: table-cell;
    padding: 10px;
}
.cell5 {
    display: table-cell;
    padding: 10px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
.cell6 {
    display: table-cell;
    padding: 10px;
}

.container img {
    vertical-align: middle;
    display: table-cell;
    margin-right: 1em;
}

.container span {
    vertical-align: middle;
    display: table-cell;
    line-height: 1.5em;
}

.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: white;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
<div class="container">
	<div class="row">
	
		<div class="cell1 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span>
			<span>
				Giám Đốc Điều Hành<br>
				Call: 0916.3232.19<br>
				minhkhangjsc@gmail.com<br>
				<a href="skype:minhkhangjsc?chat">
					<img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" />
				</a>
				<a href="ymsgr:sendim?minhkhangjsc&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm">
					<img style="float: left; margin: 3px 0px 0px 0px;" alt="Mr. Hải" border="0" src="http://opi.yahoo.com/online?u=minhkhangjsc&amp;m=g&amp;t=2&amp;l=us" />
				</a>
				<br>
			</span>
		</div>
		
		<div class="cell2 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span>
			<span>
				Phòng kinh doanh - Mr. Trí<br>
				Call: 0919.911.955<br>
				tri.nk@minhkhangjsc.com<br>
				<a href="skype:kazihaha?chat">
					<img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" />
				</a>
				<a href="ymsgr:sendim?kazihaha&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm">
					<img style="float: left; margin: 3px 0px 0px 0px;" alt="Mr. Trí" border="0" src="http://opi.yahoo.com/online?u=kazihaha&amp;m=g&amp;t=2&amp;l=us" />
				</a>
				<br>
			</span>
		</div>
		
		<div class="cell3 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/female-avatar.jpg" /></span>
			<span>
				Phòng kinh doanh - Mr. Trí<br>
				Call: 0906.430.277<br>
				phuongtrang_minhkhangjsc@gmail.com<br>
				<a href="skype:nguyen.trang669?chat">
					<img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" />
				</a>
				<a href="ymsgr:sendim?minhkhangjsc_mayhuygiay&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm">
					<img style="float: left; margin: 3px 0px 0px 0px;" alt="Ms. Trang" border="0" src="http://opi.yahoo.com/online?u=minhkhangjsc_mayhuygiay&amp;m=g&amp;t=2&amp;l=us" />
				</a>
				<br>
			</span>
		</div>
		
	</div>

	<div class="row">
	
		<div class="cell4 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span>
			<span>
				Giám Đốc Điều Hành<br>
				Phone & Mail<br>
				Mail<br>
				Image<br>
			</span>
		</div>
		
		<div class="cell5 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span>
			<span>
				Giám Đốc Điều Hành<br>
				Phone & Mail<br>
				Mail<br>
				Image<br>
			</span>
		</div>
		
		<div class="cell6 hvr-shutter-out-horizontal">
			<span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span>
			<span>
				Giám Đốc Điều Hành<br>
				Phone & Mail<br>
				Mail<br>
				Image<br>
			</span>
		</div>
		
	</div>
</div>

1 个答案:

答案 0 :(得分：0)

CSS还没有父选择器。您要做的是，更改body的{​​{1}}（父级），当它被悬停<div class="sidebar-link">事件或伪类时。即使在CSS 3中也是如此。不可能仅使用CSS。

您可能需要使用JavaScript / jQuery。

<强>的JavaScript 

:hover

<强>段

＆＃13;
＆＃13; 
var divs = document.querySelectorAll(".sidebar-link");
for (i = 0; i < divs.length; i++) {
  divs[i].onmouseover = function () {
    document.querySelectorAll("body")[0].style.backgroundColor = '#999';
  }
  divs[i].onmouseout = function () {
    document.querySelectorAll("body")[0].style.backgroundColor = '';
  }
}
＆＃13; 
var divs = document.querySelectorAll(".sidebar-link");
for (i = 0; i < divs.length; i++) {
  divs[i].onmouseover = function () {
    document.querySelectorAll("body")[0].style.backgroundColor = '#999';
  }
  divs[i].onmouseout = function () {
    document.querySelectorAll("body")[0].style.backgroundColor = '';
  }
}
＆＃13; 
#side-menu {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #F3F3F3;
  height: 100%;
}

#search-container {
  padding-top: 10px;
}

.sidebar-link {
  font-size: 16px;
  text-align: center;

}
div.sidebar-link:hover{
  background-color: #E3E3E3;
}
＆＃13;
＆＃13;
＆＃13;

小提琴：http://jsfiddle.net/9v8hn143/

<强>的jQuery 

<div id="side-menu" class="sidebar-nav span2">
  <div class="sidebar-link"><span>Link 1</span></div>
  <div class="sidebar-link"><span>Link 2</span></div>
</div>

<强>段

＆＃13;
＆＃13; 
$(".sidebar-link").mouseover(function () {
  $("body").css("background-color", "#999");
}).mouseout(function () {
  $("body").css("background-color", "");
});
＆＃13; 
$(".sidebar-link").mouseover(function () {
  $("body").css("background-color", "#999");
}).mouseout(function () {
  $("body").css("background-color", "");
});
＆＃13; 
#side-menu {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  background-color: #F3F3F3;
  height: 100%;
}

#search-container {
  padding-top: 10px;
}

.sidebar-link {
  font-size: 16px;
  text-align: center;

}
div.sidebar-link:hover{
  background-color: #E3E3E3;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题