0

このトピックがいくつか取り上げられていることは承知していますが、MouseOverに画像を表示するのに少し混乱しています。現在、div背景が色付きのコンテナがあり、ホバーすると表示されます。ここをクリック-下部の画像を下にスクロール

私が抱えている問題は、ユーザーが.product-shot-bgホバーしたときにのみ表示したい非表示のボタンがあることです。この機能をアクティブにしようと試みましたが、機能させることができません。これまでにやったことがあります...

<script>
function show(#viewProductBtn){
    document.getElementById(#viewProductBtn) = "visible";
}

function hide(#viewProductBtn){
    document.getElementById(#viewProductBtn) = "Hidden";
}
 </script>

 <style>
 .product-shot-bg{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    width: 208px;
    height: 453px;
}

.product-shot-bg:hover{
    background-color: #f3f3f3;
}

    #viewProductBtn{
    background: url(css/images/viewProductBtn.png) no-repeat;
    width: 197px;
    height: 40px;
    float: left;
    visibility: hidden;
}
     </style>

   <!-- Html -->

   <div class="product-shot-bg" onMouseOver="show('#viewProductBtn')"      onMouseOut="hide('#viewProductBtn')"> <a href="#" id="viewProductBtn "></a>
4

2 に答える 2

2

コードにはいくつかの問題があります。

  • document.getElementByIdjQueryのIDセレクターと混同しています。前者はid要素のを取り、後者は構文を使用します#id。したがって、を使用する場合は、;なしdocument.getElementByIdで渡す必要があります。id #
  • JavaScriptの識別子/名前はで始めることができないため、関数#から削除する必要があります。showhide
  • style.visibilityプロパティを関数のいずれhiddenかに、または関数visible内で変更する必要があります。show/hide
  • に余分な空白がありid "viewProductBtn "ます。

これが修正バージョンです。

<script type="text/javascript">
function show(viewProductBtn){
    document.getElementById(viewProductBtn).style.visibility = "visible";
}

function hide(viewProductBtn) {
    document.getElementById(viewProductBtn).style.visibility = "hidden";
}
</script>

<div class="product-shot-bg" onMouseOver="show('viewProductBtn')"      onMouseOut="hide('viewProductBtn')"><a href="#" id="viewProductBtn"></a>​

そしてデモ。

于 2012-09-10T23:50:37.857 に答える
0

あなたはjqueryでこのようなことをすることができます：

function show() {
  $("#viewProductBtn").show();
}

function hide() {
  $("#viewProductBtn").hide();
}

お役に立てれば！

于 2012-09-10T23:58:55.073 に答える