Классы из html в css vs code?

это не совсем то, а вообще лучше css tractor

Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Сергей delphinpro, Я рассматривал эти варианты, единственный нормальный был для меня это js. но вы только гляньте на это чудо-юдо) Это мой вопрос по тому, как сократить код потому что это бардак) А смысл всей затеи таков, при наведении на один из элементов, фигуры должны меняться местами, при чем все три одновременно.
Как сократить код?

Так вот мне кажется что уж лучше пусть это будет в css чем в js... пусть и с лишними классами на борту...

Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Сергей delphinpro, Понял) Получается единственный вариант это только непосредственное обращение через индивидуальные классы?

Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Сергей delphinpro, Подписался, добавил в закладки, выжег доменный адрес у себя на руке))
Но вот еще, почему все таки такая форма не работает, ведь все логично прописано?

.what-we-do__list:nth-child(1):hover .figures__hover-1 {
    //какие то стили 
}

Как при наведении на один блок изменять стили другого, когда блоки находятся в разных местах?

Огромное вам спасибо! Сработало. Но у меня есть пару вопросов, почему так?

1. Почему фигуры должны быть после наводящего объекта
   
2. Почему из списка они не работают
   
3. Зачем вообще нужны эти доп. символы + и ~ когда можно без них в большинстве случаев справляться. Как они работают? (первый раз с ними столкнулся, в инете нигде не написано)
   

Как можно сократить код?

Aetae, действительно, благодарю! А почему mouseenter и mouseleave, того что я использовал, плюс к производительности?

Как можно сократить код?

в таком случае какой есть выход?

Как можно сократить код?

Понял. Спасибо за профессиональный разбор! :)

Как можно сократить код?

Lynn «Кофеман», неее, в этом проекте реализовать это можно только через js, поверьте с css и html у меня проблем нет

Как можно сократить код?

tema_sun, неее, в этом проекте реализовать это можно только через js, поверьте с css и html у меня проблем нет

Как можно сократить код?

Александр, то есть вы хотите сказать что в принципе не плохо?

Бесконечная загрузка gulp watch, как исправить?

Сергей delphinpro, конечно вы правы, если не одно но. Отслеживание ничерта не работает. Меняя файлы, галп автоматом не пересобирается, соответственно не обновляет страницу ¯\_(ツ)_/¯

Как запустить gulp 2?

Михаил, серьезно. Но ошибка заключалась не в этом :)

Как запустить gulp 2?

Михаил, Выполнил как вы сказали, но ошибки все те же

есть как package.json так и package-lock.json

$ npm i

> node-sass@4.13.1 install C:\Users\Тарэк\Desktop\avd-site\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-83_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g. 

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@4.13.1 postinstall C:\Users\Тарэк\Desktop\avd-site\node_modules\node-sass
> node scripts/build.js

Building: C:\Users\Тарэк\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\node.exe C:\Users\Тарэк\Desktop\avd-site\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Users\\Тарэк\\AppData\\Roaming\\Microsoft\\Windows\\Start Menu\\Programs\\node.exe',
gyp verb cli   'C:\\Users\\Тарэк\\Desktop\\avd-site\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@14.15.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21)
gyp verb `which` failed  python Error: not found: python
gyp verb `which` failed     at getNotFoundError (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:80:29)
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\which\which.js:89:16
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at C:\Users\Тарэк\Desktop\avd-site\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:183:21) {
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location 
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\Тарэк\Desktop\avd-site\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\Тарэк\Desktop\avd-site\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at callback (C:\Users\Тарэк\Desktop\avd-site\node_modules\graceful-fs\polyfills.js:289:20)
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:183:21)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Users\\Тарэк\\AppData\\Roaming\\Microsoft\\Windows\\Start Menu\\Programs\\node.exe" "C:\\Users\\Тарэк\\Desktop\\avd-site\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\Тарэк\Desktop\avd-site\node_modules\node-sass
gyp ERR! node -v v14.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN gulp-start-2@1.0.0 No description
npm WARN gulp-start-2@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\rollup\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.13.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Тарэк\AppData\Roaming\npm-cache\_logs\2020-11-20T10_24_17_899Z-debug.log

Почему не работает style для querySelector?

v3shin, к сожалению это открывает все сразу теги, а мне нужно при нажатии на одного из них

Почему не работает style для querySelector?

v3shin, к сожалению это открывает все сразу теги, а мне нужно при нажатии на одного из них

Почему не работает style для querySelector?

Stalker_RED, я понял что нужно это реализовать перебором (человек ниже подсказал), но как, не знаю(

Почему не работает style для querySelector?

v3shin, а как это можно сделать не могли бы помочь? Код не мой поэтому не стоит удивляться)

Почему не работает style для querySelector?

Stalker_RED, если я нажимаю на первую кнопку, мой код срабатывает так, как нужно, открываются с правой стороны теги (в красном квадрате).


Но на остальные кнопки код не работает (пытаюсь нажать на вторую кнопку, но теги не появляются)

Почему не работает style для querySelector?

да, я это тоже пробовал, но дело в том что это будет работать только для первого класса.

const buttons = document.getElementsByClassName('js-toggle-card');
    for (const button of buttons) {

        button.addEventListener('click', () => {
            let tags__secondaryEl = document.querySelector('.tags__secondary');
            tags__secondaryEl.style.display = 'block';
        });
    }