1. дома
  2. Вопрос и ответ
  3. Разделите таблицу изменения цвета таблицы div вместо просто div

Разделите таблицу изменения цвета таблицы div вместо просто div

2015-12-10 2 views
-3

Извините, я снова объявлю код. Я использую div для создания таблицы, а один цвет изменения ячейки меняет цвет. Но при наведении указателя мыши на ячейку фон страницы меняется вместо этой ячейки div. Кроме того, таблица не является шириной браузера на 100%.Разделите таблицу изменения цвета таблицы div вместо просто div

Пожалуйста, помогите мне.

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

 
.row { 
 
    display: table-row; 
 
    
 
} 
 

 
.cell1 { 
 
    display: table-cell; 
 
    padding: 10px; 
 
\t border-bottom: 1px solid black; 
 
} 
 
.cell2 { 
 
    display: table-cell; 
 
    padding: 10px; 
 
    border-bottom: 1px solid black; 
 
\t border-left: 1px solid black; 
 
\t border-right: 1px solid black; 
 
} 
 
.cell3 { 
 
    display: table-cell; 
 
    padding: 10px; 
 
\t border-bottom: 1px solid black; 
 
} 
 
.cell4 { 
 
    display: table-cell; 
 
    padding: 10px; 
 
} 
 
.cell5 { 
 
    display: table-cell; 
 
    padding: 10px; 
 
\t border-top: 1px solid black; 
 
\t border-left: 1px solid black; 
 
\t 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"> 
 
\t <div class="row"> 
 
\t 
 
\t \t <div class="cell1 hvr-shutter-out-horizontal"> 
 
\t \t \t <span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span> 
 
\t \t \t <span> 
 
\t \t \t \t Giám Đốc Điều Hành<br> 
 
\t \t \t \t Call: 0916.3232.19<br> 
 
\t \t \t \t [email protected]<br> 
 
\t \t \t \t <a href="skype:minhkhangjsc?chat"> 
 
\t \t \t \t \t <img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <a href="ymsgr:sendim?minhkhangjsc&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm"> 
 
\t \t \t \t \t <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" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <br> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="cell2 hvr-shutter-out-horizontal"> 
 
\t \t \t <span><img src="http://sieuthithietbivanphong.com/image/male-avatar.jpg" /></span> 
 
\t \t \t <span> 
 
\t \t \t \t Phòng kinh doanh - Mr. Trí<br> 
 
\t \t \t \t Call: 0919.911.955<br> 
 
\t \t \t \t [email protected]<br> 
 
\t \t \t \t <a href="skype:kazihaha?chat"> 
 
\t \t \t \t \t <img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <a href="ymsgr:sendim?kazihaha&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm"> 
 
\t \t \t \t \t <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" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <br> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="cell3 hvr-shutter-out-horizontal"> 
 
\t \t \t <span><img src="http://sieuthithietbivanphong.com/image/female-avatar.jpg" /></span> 
 
\t \t \t <span> 
 
\t \t \t \t Phòng kinh doanh - Mr. Trí<br> 
 
\t \t \t \t Call: 0906.430.277<br> 
 
\t \t \t \t [email protected]<br> 
 
\t \t \t \t <a href="skype:nguyen.trang669?chat"> 
 
\t \t \t \t \t <img style="float: left;" src="http://sieuthithietbivanphong.com/image/skype.png" width="70" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <a href="ymsgr:sendim?minhkhangjsc_mayhuygiay&amp;m=Chào bạn, tôi muốn tư vấn về sản phẩm"> 
 
\t \t \t \t \t <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" /> 
 
\t \t \t \t </a> 
 
\t \t \t \t <br> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t \t 
 
\t </div> 
 

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

источник

2015-12-10 Trí Ngô Khôn

+0

Нет кода, нет ответа. Пожалуйста, добавьте код (** не ссылки **) в свой вопрос. –

+0

Ссылки на jsfiddle.net должны сопровождаться кодом – Pete

+0

Я изменил его. Так жаль. –

ответ

0

CSS-еще не имеет родительский селектор. То, что вы пытаетесь сделать, - изменить body (родительский) <div class="sidebar-link">, когда оно зависло :hover событие или псевдокласс. Это невозможно даже в CSS 3. Это невозможно с использованием только CSS.

Для этого вам может потребоваться JavaScript/jQuery.

JavaScript

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 = ''; 
    } 
}

Отрывок

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 = ''; 
 
    } 
 
}
#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; 
 
}
<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>

Fiddle: http://jsfiddle.net/9v8hn143/

JQuery

$(".sidebar-link").mouseover(function() { 
    $("body").css("background-color", "#999"); 
}).mouseout(function() { 
    $("body").css("background-color", ""); 
});

Отрывок

$(".sidebar-link").mouseover(function() { 
 
    $("body").css("background-color", "#999"); 
 
}).mouseout(function() { 
 
    $("body").css("background-color", ""); 
 
});
#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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<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>

источник

2015-12-10 09:32:45

+1

Я снова добавил код, пожалуйста, взгляните. –

Смежные вопросы

 Смежные вопросы