Форум

РОКЕР · #1 (**permalink**) 28.02.2018, 23:37

Здравствуйте,не получается сделать hover эффект при наведении на блок article в котором еще три блока, h3,ul и кнопка. В спокойном состоянии кнопка темно-серая а весь блок белый,при наведении h3 и кнопка должны становится красными а блок темно-серым. Может без JavaScript-а здесь не обойтись?

рони · #2 (**permalink**) 28.02.2018, 23:40

РОКЕР,
где код html, css?

РОКЕР · #3 (**permalink**) 01.03.2018, 00:06

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

рони · #4 (**permalink**) 01.03.2018, 00:08

РОКЕР,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #5 (**permalink**) 01.03.2018, 00:21

РОКЕР,

<!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>

РОКЕР · #6 (**permalink**) 01.03.2018, 00:31

<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>

j0hnik · #7 (**permalink**) 01.03.2018, 00:38

Что опять не получается?

РОКЕР · #8 (**permalink**) 01.03.2018, 00:43

Большое вам спасибо!

РОКЕР · #9 (**permalink**) 01.03.2018, 00:47

Все просто отлично. Вы супер!

Целый день возился с этим кодом,уже мозги кипеть начали

Форум

Справочник

Discord чат

Курсы javascript