@media (hover: hover) {
.swatch__list--item:hover .swatch__tooltip {
top: -33px;
opacity: 1;
visibility: visible;
}
}
useEffect(() => {
// какой-то код
}); // без указания второго аргумента работает на каждый "чих"
useEffect(() => {
// с пустым массивом зависимостей сработает аналогично componentDidMount, тут лучше фетчить
}, []);
useEffect(() => {
console.log(props)
// с зависимостями аналогично componentDidUpdate
}, [props])
useEffect(() => {
// можно вернуть функцию, это будет аналогично componentWillUnmount
return () => {
// тут можно удалять всякие листнеры и слать события в стор, этот код сработает при размонтировании
}
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
// импортируем хук useMemo
import { useMemo } from "react";
// импортируем хук useLocation
import { useLocation } from "react-router-dom";
const ContenWrapper: FC<ElementsIds> = memo(({ ids }) => {
// Добавляем хук перемещений
const { pathname } = useLocation();
// Если нужен например этот компонент, чтоб ререндерились изменения, оборачиваем в хук useMemo
const DashboardContent = useMemo(
() => (
<>
<TitleStyled id={ids.content.contentTitleId}>
{messages.title.default}
</TitleStyled>
<DescriptionStyled id={ids.content.contentDesctiptionId}>
{messages.description.default}
</DescriptionStyled>
</>
),
[pathname] // Зависимость, при изменении которой произойдет ререндер
);
const GameContent = () => <TitleStyled>{"блаблабла"}</TitleStyled>;
return (
<ContentWrapperStyled id={ids.content.contentWrapperId}>
<ScrollWrapperStyled id={ids.content.contentScrollWrapperId}>
<Route path="/" render={DashboardContent} />
<Route path="/game" render={GameContent} />
</ScrollWrapperStyled>
</ContentWrapperStyled>
);
});
useEffect(() => {
document.body.style.backgroundColor = userColor;
}, [userColor]);
<?php
$kakoyto_php_kod = '100%';
echo "Hello world, Im php" ;
?>
<script type="text/javascript">
$(document).mouseup(function () {
$('.header__burger').click(function (e) {
e.preventDefault()
$('.header__nav').toggleClass('header__nav--active')
})
})
$(document).mouseup(function (e) {
var $target = $(e.target)
if ($target.closest('.header__menu').length == 0) {
$('.header__nav').removeClass('header__nav--active')
}
})
</script>
<?php
$ostalnoy_php_kod;
?>
const { hash, href } = window.location;
const urlc = href.replace(hash, '');
if (hash && decodeURIComponent(readCookie('commentadd')) === urlc) {
alert("Комментарий оставлен");
}
const { hash, href } = window.location;
if (hash && href.includes(decodeURIComponent(readCookie('commentadd')))) {
alert("Комментарий оставлен");
}
.el:hover > .children {
...
}
.el:hover + .el {
...
}
.card__link:hover .card__overlay
<div class="card">
<div class=card__photo">
<a href="#" class="card__link">Читать дальше</a>
<div class="card__overlay"></div>
</div>
</div>
.card__link:hover + .card__overlay {
...
}
fieldSearch == ''
fieldSearch.length < 1
$('.header__field-search').on('input', function () {
const fieldValue = $(this).val();
if(!fieldValue.val().length){
console.log('0')
return;
}
if(fieldValue.length) {
console.log('больше 1')
return;
}
})