Использование функции наведения на элемент hr в JQuery - PullRequest
Новая
       13

Использование функции наведения на элемент hr в JQuery

0 голосов
/ 02 декабря 2018

Я хочу использовать элемент hr в качестве подчеркивания для панели навигации, но у меня возникают проблемы с использованием jquery для перемещения позиционирования hr.Кажется, он зафиксирован в верхней части веб-страницы, когда мне бы хотелось, чтобы она находилась внизу, чтобы я мог наводить курсор на разные ссылки, и элемент hr будет скользить по этой ссылке.Есть идеи?

html: 

    $('#tt').hover(function(){
        console.log("hi");
      $('hr').css("margin-left: 50%");
    
    })
    nav{
      font-size: 1.85em;
    
    }
    
    nav a{
        text-decoration: none;
        color:#000;
        float:left;
        margin-top: 1vh;
    }
    
    #one{
      margin-left: 2vw;
    }
    
    .floatright{
      float:right;
      padding-right: 3vw;
    }
    .floatright a{
        margin-left: 4vw;
    }
    
    
    hr {
      height: .25rem;
      width: 9.5%;
      margin: 0;
      margin-left: 1.3vw;
      background: tomato;
      border: none;
      transition: .3s ease-in-out;
      top: 6vh;
    }
    
    a:hover ~ hr{
      margin-left: 20px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
            <nav>
              <a id="one" href="#">name</a>
              <div class="floatright">
                <a id="tt" href="#">Link One</a>
                <a href="#">Link Two</a>
                <a href="#">Link Three</a>
                <a href="#">Link Four</a>
                </div>
                <hr />
    
              </nav>
</div>

код: https://codepen.io/anon/pen/GwzYje

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Как упомянул Md. Salahuddin - самое простое было бы добавить немного стилей :hover к вашим элементам, подчеркивание или границу в зависимости от того, где вы хотите линию.Г-н Саладахуддин предоставил примеры для подчеркивания с помощью таблиц стилей CSS и jquery.

Лично я предпочитаю использовать border-bottom, так как это позволяет вам выбрать цвет и толщину, а также padding-bottom, чтобы определить, как далеко линия от текста.Я добавляю белую рамку (или любой другой цвет фона), чтобы другие элементы не сдвигались вниз при наведении. 

nav a {
    border-bottom: 3px white solid;
}

nav a:hover {
   border-bottom: 3px tomato solid;  
}

Или, если вы хотите, чтобы анимация перемещалась поэкран , то это решение с использованием jquery и div (а не hr).Это лучше всего работает в полноэкранном режиме, вам нужно добавить отзывчивую проверку для небольших экранов (т.е. использовать sidenav или аналогичный на мобильных телефонах). 

$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));

$('nav a').hover(function(){
  
    $(".underline-nav").css("width", $(this).width());
    $(".underline-nav").css("margin-left", $(this).css("margin-left"));

    var position = $(this).position();
    $(".underline-nav").css("left", position.left);


})
.underline-nav {
  background: red;
  height: .25rem;
  position: absolute;
  top: 1.65em;
  transition:all ease 0.3s;

}
nav{
  font-size: 1.85em;

}

nav a{
    text-decoration: none;
    color:#000;
    float:left;
    margin-top: 1vh;
}

#one{
  margin-left: 2vw;
}

.floatright{
  float:right;
  padding-right: 3vw;
}
.floatright a{
    margin-left: 4vw;
}

a:hover ~ hr{
  margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
        <nav>
          <a id="one" href="#">name</a>
          <div class="floatright">
            <a id="tt" href="#">Link One</a>
            <a href="#">Link Two</a>
            <a href="#">Link Three</a>
            <a href="#">Link Four</a>
            </div>
            
            <div class="underline-nav">
            </div>

          </nav>
        </div>
0 голосов
/ 02 декабря 2018

Вы можете использовать простой CSS, чтобы сделать это.просто удалите свой тег hr, связанный css и добавьте этот css 

nav a:hover {
   text-decoration:underline;
}

https://codepen.io/anon/pen/rQPqmw

Если вы действительно хотите сделать это с помощью jquery, вы можете сделать это следующим образом: Здесь метод наведения использует дваметоды для событий мыши и листьев мыши. 

$('nav a').hover(function() {
    $(this).css("text-decoration", "underline");
}, function() {
   $(this).css("text-decoration", "none");
})

https://codepen.io/anon/pen/PxVydw

...