Mouseover и Mouseout не работают должным образом

Question

Пытается использовать эти методы jQuery, чтобы показать описание при наведении на изображение, которое оно описывает .... Это будет какая-то работа, если я не установлю отображение описания на none, и в этом случае документ начинается со всех отображаемых описаний, но затем покажет и спрячет их (все они), как мышь и мышь. Но я хочу, чтобы описания были скрыты до первой мыши. У меня также есть проблема, соответствующая описанию изображения/описания для каждого экземпляра. Я новичок в ООП, но я думаю, что это пригодится здесь. В любом случае, любые советы приветствуются!

Вот мой код:

$('.image').mouseover(function() { 
 
     $('.description').show(); 
 
    }) 
 
    
 
    $('.image').mouseout(function() { 
 
     $('.description').hide(); 
 
    })

.col-lg-3 h2 { 
 
     font-size: 1.1em; 
 
     color: black; 
 
     font-family: 'Arial'; 
 
     margin-left: .1em; 
 
     font-weight: 500; 
 
     display: none; 
 
    
 
    } 
 
    
 
    .col-lg-3 p { 
 
     font-size: .9em; 
 
     margin-left: .2em; 
 
     margin-top: -.3em; 
 
     font-weight: 400; 
 
     display: none;

 <div class="col-lg-3 project1"> 
 
     <a class = "image" href="" target="_blank"> <img width="100%" height="100%" src="" alt=""></a> 
 
     <div class = "description"> 
 
      <h2> </h2> 
 
      <p> </p> 
 
     </div>

Если я хочу, чтобы это только работа над экземплярами изображения/описания пар, я, вероятно, следует добавить некоторые .this вещи тоже нет?

Answer 1

фотографии ниже раствора

JS ЧАСТЬ: изменение JQuery селектор

$('.image').mouseover(function() { 
    $('.description *', $(this).parent()).show(); 
}) 

$('.image').mouseout(function() { 
    $('.description *', $(this).parent()).hide(); 
}) 

CSS ЧАСТЬ: без изменений

.col-lg-3 h2 { 
    font-size: 1.1em; 
    color: black; 
    font-family: 'Arial'; 
    margin-left: .1em; 
    font-weight: 500; 
    display: none; 

} 

.col-lg-3 p { 
    font-size: .9em; 
    margin-left: .2em; 
    margin-top: -.3em; 
    font-weight: 400; 
    display: none; 
} 

HT ML ЧАСТЬ: добавить правильное окончание </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="col-lg-3 ye"> 
      <a class = "image" href="targethere" target="_blank"> <img width="10%" height="10%" src="http://srdtu.org/assets/img/events/quiz-.jpg.jpg" alt="quiz"></a> 
      <div class = "description"> 
      <h2> quiz </h2> 
      <p> a quote guessing game </p> 
      </div> 
     </div> 

Answer 2

Не используйте MouseOut и MouseOver. Есть много вещей, которые вы, чтобы рассмотреть, когда вы используете эти функции .. Я предлагаю вам использовать функцию парения ..

$('.image').hover(function() { $('.description').show(); }, function() { $('.description').hide(); }); 

первым параметром является функция, которая выполняется на наведении курсора мыши и вторая функция выполняется в мышь.