無法訪問使用DOM的樣式

由於某些原因，只要將鼠標懸停在所選元素上，錯誤就會一直拋出。這似乎是每次我使用.style屬性，它給了我這個錯誤。問題是我如何使用.style訪問CSS元素。還有另一種方法嗎？無法訪問使用DOM的樣式

遺漏的類型錯誤：無法讀取的不確定

var image = document.getElementsByClassName("image"); 
var move = document.getElementsByClassName("link"); 
var description = document.getElementsByClassName("description"); 
for(var i = 0; i < move.length; i++){ 
    move[i].addEventListener("click", function(){ 

      if (move[i].style.marginLeft === "500px") { 
      move[i].style.marginLeft = "0"; 
     } else { 
      move[i].style.marginLeft = "500px"; 
     } 

    }) 
}; 


for(var i = 0; i<description.length;i++){ 
image[i].addEventListener("mouseover", function(){ 
    description[i].style.visibility = visible; 
    description[i].style.opacity = 0; 
    var last = +new Date(); 
    var tick = function(){ 
     despcription[i].style.opacity = +despcription[i].style.opacity + (new Date() - last)/700; 
     last = +new Date(); 

     if (+despcription[i].style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
    } 
    }; 

    tick(); 
    }); 
}

來源

2017-08-04 John A

財產「風格」你有一個錯字：despcription

 despcription[i].style.opacity = +despcription[i].style.opacity + (new Date() - last)/700; 
     last = +new Date(); 

     if (+despcription[i].style.opacity < 1) {

我不知道，如果你正在嘗試做的比這更多，但是你試圖在懸停的圖像上淡入淡出嗎？如果是這樣的話，那麼在CSS中設置這個效果很好：

編輯：我更新了示例以在鼠標懸停在圖像上時在圖像下方顯示標題。關鍵的是〜（兄弟姐妹）選擇在這裏：

.image:hover~.image-title { 
     opacity: 1; 
    }

當用戶將鼠標懸停在圖片類它說，然後用圖像配類標題的選擇兄弟元素和它的不透明度設置爲1

.image { 
 
    background-image: url('https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg'); 
 
    height: 300px; 
 
    width: 300px; 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.image:hover~.image-title { 
 
    opacity: 1; 
 
} 
 

 
.image-title { 
 
    opacity: 0; 
 
    transition: opacity 1s ease; 
 
    display: inline-block; 
 
    width: 300px; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<h1>Hover Over Image</h1> 
 
<div class="image"></div> 
 
<h3 class="image-title">Image Title</h3>

來源

2017-08-04 19:12:45 flyer

感謝追趕但對我來說，這不是我有問題。我相信我沒有正確訪問CSS元素。我上面的每個功能都不起作用，因爲我沒有正確更改CSS屬性。 –

我想將鼠標懸停在圖片上，然後在其旁邊顯示文字。所以從技術上講，我不會只需要JavaScript來首先訪問圖像，然後添加功能，使其旁邊的文本可見？這是總體思路。 –

無法訪問使用DOM的樣式

回答

相關問題