How to use mouse events to create enter/out effect without the German inside the selected element interfering

Question

I wanted the div with class block was with an outline when I entered with the mouse inside the div and then the border disappeared when I take the mouse out.

Problem, when I pass the mouse over the H1 inside the div.block the border disappears, I would like the border to remain while the mouse is inside the div even over other elements and then disappear only when I take the mouse from the div

var blocks = document.querySelectorAll('.block');

blocks.forEach(element =>
  element.addEventListener('mouseenter', (event) => {
    event.target.style.border = '1px solid #666'
  }))
blocks.forEach(element =>
  element.addEventListener('mouseout', (event) => {
    event.target.style.border = '0'
  }))

<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>
<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>

Answer 1

Dude change the event of mouseenter for mouseover and change .target for .currentTarget and will work as expected ;)

var blocks = document.querySelectorAll('.block');

blocks.forEach(element =>
  element.addEventListener('mouseover', (event) => {
    event.currentTarget.style.border = '1px solid #666'
  }))
blocks.forEach(element =>
  element.addEventListener('mouseout', (event) => {
    event.currentTarget.style.border = '0'
  }))

<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>
<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>

Answer 2

If you don’t want to use javascript you can do it using CSS only.

One pseudo-class CSS is just a keyword added to selectors CSS specifying a special status of the selected item.

Use the pseudo-class CSS :hover corresponding when the user interacts with an element using a pointing device. Simplifying, :hover fires when the user hovers the mouse pointer over that element.

In your case just describe the style you want to use, border: 1px solid #666;, when the user hovers over an element HTML class block. To do this create a selector CSS .block and add the pseudo-class CSS:hover.

.block:hover {
  border: 1px solid #666;
}

<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>
<div class="block">
  <h1>Douglas Takiuti</h1>
  <p>Lorem Ipsum é simplesmente um texto fictício da indústria de impressão e composição. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500, quando um impressor desconhecido pegou uma galé do tipo e embaralhou para fazer um livro
    de amostra de tipos.</p>
</div>

Answer 3

You have a css property for this, the property :Hover

In case your code would look like this:

.block:hover{
    border:1px solid #666;
}