Проблема с содержанием P тегов охватывающих ссылку на уровне блоков

Question

Я схожу с ума с помощью этого ползунка J-запроса я адаптировано из barousel плагин juliendecaudin в

Я положил все это на jsfiddle:

http://jsfiddle.net/psFMs

Четыре навигационных блока создаются кодом jquery (вот почему я столкнулся с этой проблемой). Так как я нуждался в тексте над каждым блоком, я добавил несколько тегов p к коду, а затем разместил их над каждым блоком. Это означало, что они охватывали ссылки, и, следовательно, эффекты зависания останавливались.

Я пробовал несколько вещей, которые, как я думал, заставят его работать с тем, что ограниченные знания jquery у меня есть (когда вы наводите курсор на тег p, показываете соответствующее фоновое изображение с правильной шириной и высотой и, например, позиционируетесь) работал!

Что бы я хотел знать, так это то, как заставить текст действовать как ссылку, подобную навигационным блокам, а также сделать так, чтобы при наведении курсора на текст фоновые изображения тоже зависали. В качестве альтернативы, если есть способ, я мог бы объединить эти два соединения, которые будут раздуваться!

HTML-бит, где я добавил р-теги здесь (код JQuery автоматически создает HTML-уль элементы Li:

<div class="barousel_nav"> 
<p class="abs abs1">Value Proposition Development</p> 
<p class="abs abs2">Sales Engagement</p> 
<p class="abs abs3">Customer Communications</p> 
<p class="abs abs4">Insight-driven Lead Generation Campaigns</p> 
</div> 

Если бы я мог specifiy каждый нав уль Li ссылку, то я должен быть в состоянии создать обходной путь, но, как он стоит каждого Ли не имеет ничего конкретного об этом

Answer 1

вы можете изменить некоторые биты, чтобы положить его на работу, как и следовало ожидать:

о файле jquery.barousel.js, обратите внимание на этот фрагмент:

//build the navigation 
if (settings.navType == 1) { 
    //items navigation type 
     var strNavList = "<ul>"; 

И изменить его, добавляя class (navigationMenu) к ul:

//build the navigation 
if (settings.navType == 1) { 
    //items navigation type 
     var strNavList = "<ul class='navigationMenu'>"; 

На заголовок страницы, после того, как вы загрузите все библиотеки, добавьте фрагмент кода ниже:

<script type="text/javascript"> 
    $(function() { 
     // Look for all the spans which contains the class abs, and move them 
     // to the li accordingly. 
     $("span.abs").each(function (index, element) { 
      var target = $("ul.navigationMenu li")[index]; 
      $(this).appendTo($(target).find("a")); 
     }); 
    }); 
</script> 

Измените свой CSS, удалив неиспользованные правила:

.barousel { 
    height:408px; 
    margin-bottom:85px; 
    position:relative; 
    width:750px; 
} 
.barousel_wrap { 
    float:right; 
    height:408px; 
    width:650px; 
} 
.barousel_image { 
    background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/bgGrayGradient.jpg); 
    background-position:initial initial; 
    background-repeat:repeat no-repeat; 
    height:306px; 
    padding-left:10px; 
    width:660px; 
} 
.barousel_image img { 
    display:none; 
    position:absolute; 
} 
.barousel_image img.default { 
    display:block; 
} 
.barousel_image img.current { 
    z-index:10; 
} 
.barousel_content { 
    background-color:#6D4682; 
    background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/largegrad_05.jpg); 
    background-position:initial initial; 
    background-repeat:repeat no-repeat; 
    display:block; 
    height:auto; 
    margin:0; 
    padding:5px 10px 0; 
    width:650px; 
} 
.barousel_content div { 
    display:none; 
    margin-bottom:7px; 
    width:650px; 
} 
.barousel_content div.default { 
    display:block; 
    height:auto; 
    padding-bottom:7px !important; 
} 
.barousel_content p { 
    color:white; 
    font-size:12px; 
    font-weight:normal; 
    line-height:16px; 
    margin-bottom:8px !important; 
    top:0; 
    z-index:50; 
} 
.barousel_content p.sliderH { 
    font-weight:bold; 
    margin-bottom:5px; 
} 
.barousel_nav { 
    float:left; 
    height:408px; 
    width:100px; 
    z-index:20; 
} 
/*.barousel_nav p.abs { 
    cursor:pointer; 
    display:inline-block; 
    font-size:11px; 
    left:5px; 
    margin:0 auto; 
    position:absolute; 
    text-align:center; 
    width:90px; 
} 
.barousel_nav p.abs1 { 
    top:35px; 
} 
.barousel_nav p.abs2 { 
    top:135px; 
} 
.barousel_nav p.abs3 { 
    bottom:140px; 
} 
.barousel_nav p.abs4 { 
    bottom:25px; 
    left:5px; 
}*/ 
.barousel_nav ul { 
    float:right; 
    margin:0; 
    padding:0; 
} 
.barousel_nav li { 
    float:left; 
    /*font-size:0; 
    line-height:0;*/ 
    list-style:none; 
    padding-left:3px; 
} 
.barousel_nav li a { 
    background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/BTN_01.jpg); 
    display:block; 
    /*font-size:0;*/ 
    height:102px; 
    /*line-height:0;*/ 
    text-decoration:none; 
    width:100px; 
} 
.barousel_nav li a:hover { 
    background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/current_BTN_01.jpg); 
} 
.barousel_nav li a.current { 
    background-image:url(http://oliverbanham.com/quantumSite/images/SLIDER/images/current_BTN_01.jpg); 
} 

И, наконец, немного изменить HTML:

<span class="abs">Value Proposition Development</span> 
<span class="abs">Sales Engagement</span> 
<span class="abs">Customer Communications</span> 
<span class="abs">Insight-driven Lead Generation Campaigns</span> 

Работа демо: http://jsfiddle.net/psFMs/2/

Конечно, есть некоторые CSS хитрости, чтобы сделать, и сделать его лучше, но важно здесь.