Форум

Gera Herbst · #1 (**permalink**) 28.08.2015, 17:04

Добрый день!
Ситуация такая: есть ссылка <a ..> в ней <span>
При наведении на <a ..> у меня срабатывают нужные стили (:hover). Мне нужно, чтобы при наведении на <a ..> срабатывали span:hover::before, span:hover стили. Такой себе event propagation только наоборот - навожу курсор на родительский элемент, и получаю событие и на дочернем.

Пробовала:
$('a').on('mouseenter', function(e) {
$('span').trigger(e);
})
Ошибка: Uncaught RangeError: Maximum call stack size exceeded

Decode · #2 (**permalink**) 28.08.2015, 18:42

Так?

<style>
    a {
      display: inline-block;
      padding: 10px 20px;
      border: 2px solid red;
      font: 1em/1.2 Tahoma, sans-serif;
    }
    
    a:hover > span:before {
      content: 'bla-bla '
    }
    
    a:hover > span {
      color: red;
    }
</style>

<a href="">
    <span>Link</span>
</a>

Gera Herbst · #3 (**permalink**) 28.08.2015, 20:29

Нет, код пишу ниже.
- Смотри, когда я навожу на span (кружок), то верхний бордер дива меняет цвет и соответственно происходит стилизация кружочка (своеобразная анимация; всплытие события).
- Когда навожу на див, то меняется только цвет верхнего бордера. А мне нужно,чтобы и анимация кружочка происходила.

Вот и думаю как затопить hover.

Можно при событии hover добавлять класс .hover к span, но это не сработает с псевдоэлементом.

А просто передать событие на другой элемент при mouseenter на диве, почему-то не срабатывает.

Может есть вообще другой подход к этой задаче...

Код:

<style>
			.heading a {
				display: block;
			    color: #853E29;
			    padding: 20px;
			}

			.heading {
			    margin-top: 6px;
			    background: #FFF;
			    border-top: 2px solid #EEE;
			    border-bottom: 2px solid #EEE;
			}

			.heading:hover {
				border-top: 2px solid #E14817;
			}

		    .heading a span {
			    display: block;
			    float: left;
			    background-color: #E14817;
			    border-radius: 50%;
			    padding: 7px 14px;
			    margin-top: -7px;
			    margin-right: 10px;
			    -webkit-transition: color 0.3s;
			    transition: color 0.3s;
			    position: relative;
			    z-index: 1;
			    -webkit-backface-visibility: hidden;
			    -moz-osx-font-smoothing: grayscale;
			}

			.heading a span:focus {
			    outline: none;
			}

			.heading a span::before {
			    content: '';
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    border-radius: inherit;
			    z-index: -1;
			    box-shadow: inset 0 0 0 35px #f9e1c4;
			    -webkit-transform: scale3d(0.9, 0.9, 1);
			    transform: scale3d(1.05, 1.05, 1);
			    -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
			    transition: box-shadow 0.3s, transform 0.3s;
			}

			.heading a span:hover {
			    color: #FFF;
			}

			.heading a span:hover::before {
			    box-shadow: inset 0 0 0 1px #E14817;
			    -webkit-transform: scale3d(1, 1, 1);
			    transform: scale3d(1, 1, 1);
			}
		</style>
           <div class="heading">
		<a role="button">
	            <span>2</span>Configure product
	        </a>
	    </div>

Decode · #4 (**permalink**) 28.08.2015, 23:24

Gera Herbst,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>JS Bin</title>
  <style>
    .heading {
      margin-top: 6px;
      background: #FFF;
      border-top: 2px solid #EEE;
      border-bottom: 2px solid #EEE;
    }

    .heading a {
      display: block;
      color: #853E29;
      padding: 20px;
    }

    .heading a span {
      display: block;
      float: left;
      background-color: #E14817;
      border-radius: 50%;
      padding: 7px 14px;
      margin-top: -7px;
      margin-right: 10px;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      position: relative;
      z-index: 1;
      -webkit-backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
    }

    .heading a span:focus {
      outline: none;
    }

    .heading a span::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      z-index: -1;
      box-shadow: inset 0 0 0 35px #f9e1c4;
      -webkit-transform: scale3d(0.9, 0.9, 1);
      transform: scale3d(1.05, 1.05, 1);
      -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
      transition: box-shadow 0.3s, transform 0.3s;
    }

    .heading:hover {
      border-top: 2px solid #E14817;
    }

    .heading:hover span {
      color: #fff;
    }

    .heading a span:hover {
      color: #FFF;
    }

    .heading:hover span:before {
      box-shadow: inset 0 0 0 1px #E14817;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    .heading a span:hover::before {
      box-shadow: inset 0 0 0 1px #E14817;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  </style>
</head>
<body>
  <div class="heading">
    <a role="button">
      <span>2</span>Configure product
    </a>
  </div>
</body>
</html>

Gera Herbst · #5 (**permalink**) 30.08.2015, 14:41

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript