Взаимодействие элементов из разных дивов

sasha_anto · September 24, 2018

Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid r3-bkVt7Eeeliw7ADgKLdA_dad4df03b12f64db3

Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом.

<body>
    <header>Бабуленькины котятки</header>
    <div class="global">
        <div class="menu">
            <a class="submenu" href="#" id="abis">Абиссинская</a>
            <a class="submenu" href="#" rel="brit"">Британская</a>
            <a class="submenu" href="#" rel="rus">Русская голубая</a>
            <a class="submenu" href="#" rel="siam">Сиамская</a>
        </div>
        <div class="cats">
            <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis">
            <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat">
            <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat">
        </div>
        <div class="rating"></div>
    </div>
    <footer>Подвал</footer>

<style>
a {
    color: #000 !important;
    text-decoration: none;
}
body {
    background-color: gainsboro;
    display: flex;
    flex-direction: column;
}
header {
    text-align: center;
    font-size: 40px;
    font-style: bold;
}
img {
    width: 250px;
    height: 200px;
}
.global {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
}
footer {
    color: wheat;
    background: black;
}
div.menu {
    display: flex;
    width: 250px;
    flex-wrap: wrap; 
    background: gray;
    align-content: flex-start;  
}
.submenu {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 25px;
    border-bottom: white 1px solid; 
}
.cats {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    height: 900px;
    justify-content: space-around;
}

.cats img:nth-child(2){
    width: 500px;
}

.cats img:nth-child(6) {
    width: 500px;
}

.cats img:nth-child(8) {
    width: 750px;
}

.rating {
    width: 250px;
    background: olive;
}


</style>

Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки

Switch74 · September 24, 2018

http://jsfiddle.net/pmy1vea3/
или
http://jsfiddle.net/pmy1vea3/1/

klierik · September 24, 2018

6 минут назад, sasha_anto сказал:

Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность.

Здравствуйте.

Проще всего это реализовать на JS

sasha_anto · September 24, 2018

Только что, klierik сказал:

Здравствуйте.

Проще всего это реализовать на JS

Да, об этом я знаю, но обязательный пункт в задании это не использовать js

klierik · September 24, 2018

45 минут назад, sasha_anto сказал:

Да, об этом я знаю, но обязательный пункт в задании это не использовать js

В таком случае используйте PHP — после выбора категории сервер вернёт страницу с уже выбранными породами.

sasha_anto · September 24, 2018

1 минуту назад, klierik сказал:

В таком случае используйте PHP — после выбора категории сервер вернёт страницу с уже выбранными породами.

Мне можно использовать только html и css

klierik · September 24, 2018

Только что, sasha_anto сказал:

Мне можно использовать только html и css

В таком случае я искренне вам сочувствую. От вас требуется "собрать автомобиль", пригодный для эксплуатации, но запрещено устанавливать колёса.

Sign In

Взаимодействие элементов из разных дивов

Question

sasha_anto

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

sasha_anto

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

sasha_anto

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information