|
Сообщение от Anshag
|
Нужно сделать следующие изменения:
Добавить настраиваемый отступ подчеркивания и изменить его цвет (цвет подчеркивания не должен совпадать с цветом текста)
Так же добавить функцию изменения цвета текста при наведении, и при раскрытом виде спойлера.
Вся эта конструкция должна выравниваться посередине экрана.
|
я вас плохо понял, и поэтому получилось вот так:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').slideToggle('slow');
return false;
});
});
</script>
<style>
.buttons-container {
position: relative;
}
.button1, .button2{
box-sizing: border-box;
width: 150px;
height: 40px;
text-decoration: none;
background-color: #ccc;
color: #08c;
position: absolute;
padding-top:11px;
text-align: center;
}
.button1 {
top: 20px;
left:50px;
}
.button2 {
top: 80px;
left:50px;
}
.spoiler_body {
display: none;
text-align: center;
}
.container {
text-align: center;
margin-bottom: 10px;
}
.line{
display: inline-block;
width: 530px;
height: 0;
border-bottom: 1px solid #999;
transition: all 1s linear;
}
.spoiler_links:hover+.container>.line{
border-bottom: 1px solid #0A5C0E;
}
.spoiler_links {
display: block;
font-size: 36pt;
text-align: center;
text-decoration: none;
color: #000;
cursor:pointer;
transition:all 1s linear;
}
.spoiler_links:hover {
color: #060;
}
</style>
</head>
<body>
<div>
<div class="buttons-container">
<a href="#" class="button1">Увеличить отступ</a>
<a href="#" class="button2">Уменьшить отступ</a>
</div>
<a href="" class="spoiler_links">Название спойлера</a>
<div class="container">
<div class="line"></div>
</div>
<div class="spoiler_body">
<img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
</div>
</div>
<script>
document.getElementsByClassName('button1')[0].onclick = function (){
var width =document.getElementsByClassName('line')[0].style.width || getComputedStyle(document.getElementsByClassName('line')[0]).width;
console.log(width);
width = parseInt(width) + 10+'px';
console.log(width);
document.getElementsByClassName('line')[0].style.width = width;
}
document.getElementsByClassName('button2')[0].onclick = function (){
var width =document.getElementsByClassName('line')[0].style.width || getComputedStyle(document.getElementsByClassName('line')[0]).width;
console.log(width);
width = parseInt(width) - 10+'px';
console.log(width);
document.getElementsByClassName('line')[0].style.width = width;
}
</script>
</body>
</html>