JQuery изменение изображения при наведении, когда изображение и пункт меню 'title' равны друг другу

Это решение теперь разрешено. Я упростил код.JQuery изменение изображения при наведении, когда изображение и пункт меню 'title' равны друг другу

Моя проблема в том, что всякий раз, когда я наводил курсор на все элементы списка (показано ниже ul.menu), затем снова наведите указатель на проверку style = "display: none;" не удаляется после того, как я снова вернусь к мыши.

Текущего Html:

<ul class="menu"> 
<li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li> 
<li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li> 
</ul>

Изображение, которые необходимо изменить, когда каждый пункт меню наведения мышки:

<div id="bannerContainer"> 

    <div class="view-content"> 

    <div class="views-row views-row-1 views-row-odd views-row-first">  
     <span class="field-content"> 

      <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://localhost:8888/sites/default/files/eldoradobanner.jpg" /> 
      </a> 

     </span> 
     </div> 
    </div> 

    <div class="views-row views-row-2 views-row-even views-row-last">  
     <span class="field-content"> 

      <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://localhost:8888/sites/default/files/grandbanner.jpg" /> 
      </a> 

     </span> 
    </div> 

    </div> 
<!-- default image --> 
    <div id="upload"> 
    <img width="636" height="561" title='venues' src="http://localhost:8888/sites/default/files/venues_banner.jpg" alt="" class="imagefield imagefield-field_image">      
</div> 

</div>

Обновлено Jquery

// Dynamic mouse over menu item to display image utilizing titles 
    $('#content .menu-block-3 ul.menu a').mouseover(function(){ 
     $("#bannerContainer #upload").fadeOut('fast'); 
     var sharedtitle = $(this).attr("title");   
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeIn('fast'); 
    }); 
    $('#content .menu-block-3 ul.menu a').mouseout(function(){ 
     $("#bannerContainer #upload").fadeIn('fast'); 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').fadeOut('fast'); 
    });

CSS:

/****** Venues Rollover navigation menu ******/ 
.view-ImageRollover { 
    float:left; 
    position:relative; 
    top: 0; 
} 
.view-ImageRollover .view-content { /* outer container */ 
    position: relative; 
} 
.view-ImageRollover .field-content img { /* inner container */ 
    display: block!Important; 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0px; 
} 
/* default image */ 
#upload { 
    float: left; 
    z-index: 5; 
    position: absolute; 
} 
#upload .imagefield-field_image img{ 
    left:0px; 
    position: absolute; 
}

You can see dev site here.

Есть ли у кого-нибудь представление о моей проблеме? дайте мне знать, если я не ясно. Я попробовал добавить display: block в .imagefield, но он перехватывает jQuery и не вернется к блокировке.

источник

2010-08-18 arkjoseph

Идентификатор является '/ grand', с что там слэш? –

извините, что ошибка. – arkjoseph

Непонятно, что вы просите. Что должно измениться при использовании мыши? –

Дайте этому выстрел

к сведению, что Jquery позволяет находить значения элементов, используя следующий синтаксис: IMG [название = 'SomeValue']

<html> 
<head> 
<script src='jquery.min.js' ></script> 


<script type="text/javascript"> 

$(document).ready(function() { 

    $('ul.menu a').mouseover(function(){ 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').addClass('equal');   
    }); 


    $('ul.menu a').mouseout(function(){ 
     var sharedtitle = $(this).attr("title"); 
     $('#bannerContainer img[title = "'+sharedtitle+'" ]').removeClass('equal');  }); 


}); 


</script> 
</Head> 
<body> 


<ul class="menu"> 
<li class="menu-mlid-187" id="ElDorado"><a title="El Dorado" href="/el-dorado">El Dorado</a></li> 
<li class="menu-mlid-202" id="TheGrand"><a title="The Grand" href="/grand">The Grand</a></li> 
</ul> 


<div id="bannerContainer"> 

    <div class="view-content"> 

    <div class="views-row views-row-1 views-row-odd views-row-first">  
     <span class="field-content"> 

      <a href="/el-dorado" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="El Dorado" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
      </a> 

     </span> 
     </div> 
    </div> 

    <div class="views-row views-row-2 views-row-even views-row-last">   
     <span class="field-content"> 

      <a href="/grand" class="imagefield imagefield-nodelink imagefield-field_image"> 
<img class="imagefield imagefield-field_image equal" width="636" height="420" alt="" title="The Grand" src="http://www.google.com/images/srpr/nav_logo14.png" /> 
      </a> 

     </span> 
    </div>  

    </div> 
<!-- default image --> 
    <div id="upload"> 
    <img width="636" height="561" title='venues' src="http://www.google.com/images/srpr/nav_logo14.png" alt="" class="imagefield imagefield-field_image">      
</div> 

</div> 
</body> 
</html>

источник

2010-08-26 00:40:50

О, спасибо! вы живая заставка! Я был почти на правильном пути, но вы попали на место. Спасибо, Брайан! – arkjoseph

К сожалению, я столкнулся с проблемой, когда наводил указатель мыши на все элементы, а затем возвращался, чтобы увидеть их снова. после проверки, jquery добавляет отображение: нет сразу после того, как вытащил мышь. Я бы хотел, чтобы он отображал этот дисплей: нет после того, как я прохожу через li – arkjoseph

Используете ли вы код как опубликованный или вариант? Если вы внесли изменения, отправьте код, который вы используете. [Edit the original question] (Код в моем ответе ничего не делает с отображением Property). –

JQuery изменение изображения при наведении, когда изображение и пункт меню 'title' равны друг другу

ответ

Смежные вопросы