как добавить афтер при каком-то экшене?

Question

в реакте, хочу закинуть при маусдауне чтото в афтер и убрать его при маусауте, типа хавер получается. как это реализовать?

function changeBackground(e) {
    e.target.after(что здесь нужно писать)
    }
мой афтер{
content: "";
display: block;
position: absolute;
bottom: 0.3em;
left: 0;
width: 100%;
height: 1px;
background-color: #7a8ba0;
opacity: 0;}

Answer 1

Типа хавер - это всё-таки комбинация mouseover/mouseout. Напрямую из JS обратиться к псевдо-элементу after нельзя, поэтому если хочется задать значение свойства content псевдо-элемента с помощью JS, то можно это сделать через создание и включение в DOM стилевого компонента <style>

const afterContent = "after";
const elem = document.querySelector(".elem");

elem.addEventListener("mouseover", function(){
  // Создаём элемент <style> для указания в нём стилей для псевдо-элемента ::after
  let styleElem = document.createElement("style");
  // Добавляем какой-нибудь идентификатор, по которому этот элемент <style> потом можно будет удалить
  styleElem.classList.add("afterStyle");
  // Добавляем стиль для псевдо-элемента ::after, задавая его содержимое значением переменной
  styleElem.innerHTML = `.elem::after {content: "${afterContent}";}`; 
  // Добавляем элемент <style> последним потомком элемента <head>
  document.head.append(styleElem);
});

elem.addEventListener("mouseout", function(){
  // Удаляем созданный нами элемент <style> из элемента <head>
  document.head.querySelector('.afterStyle').remove();
});

.elem {
  width: 200px;
  height: 200px;
  position: relative;
  background: #0F0;
}
.elem::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.3em;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #7a8ba0;
}

<div class="elem"></div>

Answer 2

::after как я знаю не конектит с js, создавайте span и его стильте

var span = document.createElement("span");
elem.after(span);

Answer 3

Такое делать нельзя. Назначать стили напрямую вообще плохая практика, не говоря уже о реакте. Используй стейты и хуки. Просто назначай класс при дидмаунте и наоборот.

const ComponentWrap = (props) => {
    const [after, setAfter] = useState(false);

    return <div class={after ? "showAfter" : "hideAfter"}>
        {React.cloneChild(props.children, {setAfter})}
    </div>;

}
const UComponent = (props) => {
    const {setAfter} = props;

    useEffect(() => {
        setAfter(true);

        return () => {
           setAfter(false);
        }
    }, []);

    return ...
}

export default (props) => {
    return <ComponentWrap><UComponent {...props}/></ComponentWrap>
}

БЛОГ НА HUSL

как добавить афтер при каком-то экшене?

Ответы (3 шт):