[解決済み] ブロックレベルのリンクをカバーするPタグの内容に関する問題

質問

私はjuliendecaudinのbarouselプラグインから適応したこのj-queryスライダーで狂っている

jsfiddleに全部載せました。

http://jsfiddle.net/psFMs

4つのナビゲーションブロックは、jqueryのコードによって作成されています（これがこの問題の理由です）。そこで、各ブロックの上にテキストが必要だったため、コードにいくつかのpタグを追加し、各ブロックの上に配置しました。これにより、リンクが覆われ、その結果、ホバー効果が停止しました。

私の持っている限られたjqueryの知識でうまくいくと思ったことを複数試しましたが（例えば、pタグにカーソルを合わせたときに、適切な幅と高さで関連する背景画像を表示する、など）、どれもうまくいきませんでした！このような場合、pタグの上にカーソルを置くと、背景画像が表示されます。

知りたいのは、ナビゲーションブロックのようにテキストをリンクとして動作させる方法ですが、同時に、テキストにカーソルを置いたときに背景画像もホバーするようにすることです。また、この2つを融合させる方法があれば最高です。

pタグを追加したhtml部分はこちらです（jqueryのコードは自動的にhtmlのul 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>

もし、nav ul li のリンクをそれぞれ指定できれば、回避策を講じることができるのですが、現状ではそれぞれのliには何も指定がありません!

どうすればいいですか？

いくつかのビットを変更することで、期待通りに動作させることができます。

において 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をいじって見栄えを良くすることもありますが、肝心なのはここです。