28.02.2018, 23:37
|
Новичок на форуме
|
|
Регистрация: 28.02.2018
Сообщений: 5
|
|
hover эффект при наведении
Здравствуйте,не получается сделать hover эффект при наведении на блок article в котором еще три блока, h3,ul и кнопка. В спокойном состоянии кнопка темно-серая а весь блок белый,при наведении h3 и кнопка должны становится красными а блок темно-серым. Может без JavaScript-а здесь не обойтись?
|
|
28.02.2018, 23:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
РОКЕР,
где код html, css?
|
|
01.03.2018, 00:06
|
Новичок на форуме
|
|
Регистрация: 28.02.2018
Сообщений: 5
|
|
<section class="pickYourPlan" id="pickYourPlan">
<h3>Pick your plan</h3>
<p>Upgrade, downgrade or cancel anytime.</p>
<div class="yourPlan centerBlockMain clearfix">
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" id="red" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>bussines</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
</div>
</section>
.pickYourPlan {
margin-bottom: 200px;
}
.pickYourPlan h3 {
color: #000;
font-size: 2.5em;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
}
.pickYourPlan p {
color: #000;
font: bold 1em 'ptsansregular', sans-serif;
text-align: center;
margin-bottom: 38px;
}
.pickYourPlan article {
border: 1px solid #BEBEBE;
float: left;
width: 31.7%;
text-align: center;
margin-bottom: 50px;
}
.pickYourPlan article:first-child {
margin-left: 2.45%;
border-right: 0;
}
.pickYourPlan article:last-child {
border-left: 0;
}
article h2 {
color: #2c3039;
font-size: 1.125em;
text-transform: uppercase;
text-align: center;
margin: 25px 0 6px;
}
.headerPlan p {
color: #2c3039;
font: bold 0.875em 'ptsansregular', sans-serif;
margin-bottom: 50px;
}
.yourPlan ul li {
list-style-type: none;
margin: 15px;
}
.p25, .p45, .p65 {
font: 2.5em 'robotobold', sans-serif;
}
.pickYourPlan sup {
font: 1.5em 'robotobold', sans-serif;
vertical-align: 40%;
}
.mo {
font: bold 0.8em 'robotobold', sans-serif;
}
.orderNow {
cursor: pointer;
color: #fff;
background: #2C3039;
border: none;
font: bold 0.875em 'ptsansbold', sans-serif;
text-transform: uppercase;
padding: 18px 65px;
margin-top: 30px;
margin-bottom: 15px;
}
.orderNow:hover {
background: #e84c3d;
}
|
|
01.03.2018, 00:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
РОКЕР,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
01.03.2018, 00:21
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
РОКЕР,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.pickYourPlan{
margin-bottom:200px;
}
.pickYourPlan h3{
color:#000;
font-size:2.5em;
text-transform:capitalize;
text-align:center;
margin-bottom:20px;
}
.pickYourPlan p{
color:#000;
font:bold 1em 'ptsansregular',sans-serif;
text-align:center;
margin-bottom:38px;
}
.pickYourPlan article{
border:1px solid #BEBEBE;
float:left;
width:31.7%;
text-align:center;
margin-bottom:50px;
}
.pickYourPlan article:first-child{
margin-left:2.45%;
border-right:0;
}
.pickYourPlan article:last-child{
border-left:0;
}
article h2{
color:#2c3039;
font-size:1.125em;
text-transform:uppercase;
text-align:center;
margin:25px 0 6px;
}
.headerPlan p{
color:#2c3039;
font:bold 0.875em 'ptsansregular',sans-serif;
margin-bottom:50px;
}
.yourPlan ul li{
list-style-type:none;
margin:15px;
}
.p25,.p45,.p65{
font:2.5em 'robotobold',sans-serif;
}
.pickYourPlan sup{
font:1.5em 'robotobold',sans-serif;
vertical-align:40%;
}
.mo{
font:bold 0.8em 'robotobold',sans-serif;
}
.orderNow{
cursor:pointer;
color:#fff;
background:#2C3039;
border:none;
font:bold 0.875em 'ptsansbold',sans-serif;
text-transform:uppercase;
padding:18px 65px;
margin-top:30px;
margin-bottom:15px;
}
article:hover .orderNow,article:hover .headerPlan{
background-color:#e84c3d;
}
article:hover{
background-color:#2C3039;
color:#FFFFFF;
}
article:hover .headerPlan p,article:hover .headerPlan h2{
color:#FFFFFF;
}
</style>
</head>
<body>
<section class="pickYourPlan" id="pickYourPlan">
<h3>Pick your plan</h3>
<p>Upgrade, downgrade or cancel anytime.</p>
<div class="yourPlan centerBlockMain clearfix">
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" id="red" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>bussines</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
</div>
</section>
</body>
</html>
|
|
01.03.2018, 00:31
|
Новичок на форуме
|
|
Регистрация: 28.02.2018
Сообщений: 5
|
|
<html>
<style type="text/css">
.pickYourPlan {
margin-bottom: 200px;
}
.pickYourPlan h3 {
color: #000;
font-size: 2.5em;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
}
.pickYourPlan p {
color: #000;
font: bold 1em 'ptsansregular', sans-serif;
text-align: center;
margin-bottom: 38px;
}
.pickYourPlan article {
border: 1px solid #BEBEBE;
float: left;
width: 31.7%;
text-align: center;
margin-bottom: 50px;
}
.pickYourPlan article:first-child {
margin-left: 2.45%;
border-right: 0;
}
.pickYourPlan article:last-child {
border-left: 0;
}
article h2 {
color: #2c3039;
font-size: 1.125em;
text-transform: uppercase;
text-align: center;
margin: 25px 0 6px;
}
.headerPlan p {
color: #2c3039;
font: bold 0.875em 'ptsansregular', sans-serif;
margin-bottom: 50px;
}
.yourPlan ul li {
list-style-type: none;
margin: 15px;
}
.p25, .p45, .p65 {
font: 2.5em 'robotobold', sans-serif;
}
.pickYourPlan sup {
font: 1.5em 'robotobold', sans-serif;
vertical-align: 40%;
}
.mo {
font: bold 0.8em 'robotobold', sans-serif;
}
.orderNow {
cursor: pointer;
color: #fff;
background: #2C3039;
border: none;
font: bold 0.875em 'ptsansbold', sans-serif;
text-transform: uppercase;
padding: 18px 65px;
margin-top: 30px;
margin-bottom: 15px;
}
.orderNow:hover {
background: #e84c3d;
}
.red {
color: #ea6456;
}
</style>
<section class="pickYourPlan" id="pickYourPlan">
<h3>Pick your plan</h3>
<p>Upgrade, downgrade or cancel anytime.</p>
<div class="yourPlan centerBlockMain clearfix">
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p25">25</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" id="red" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>bussines</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p45">45</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
<article>
<div class="headerPlan">
<h2>personal</h2>
<p>Perfect Pack for Small Business</p>
</div>
<ul>
<li><sup>$</sup><span class="p65">65</span><span class="mo">/MO</span></li>
<li><strong>3 Gb</strong> of storage</li>
<li><strong>10</strong>repositories</li>
<li><strong>10</strong>parked domains</li>
<li><strong>25 FTP</strong>accounts</li>
</ul>
<form action="formdata.php" method="post">
<input type="submit" name="submit" class="orderNow" value="order now">
</form>
</article>
</div>
</section>
</html>
|
|
01.03.2018, 00:38
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Что опять не получается?
|
|
01.03.2018, 00:43
|
Новичок на форуме
|
|
Регистрация: 28.02.2018
Сообщений: 5
|
|
Большое вам спасибо!
|
|
01.03.2018, 00:47
|
Новичок на форуме
|
|
Регистрация: 28.02.2018
Сообщений: 5
|
|
Все просто отлично. Вы супер! Целый день возился с этим кодом,уже мозги кипеть начали
|
|
|
|