鼠標高亮顯示的圖像輸入

我有4張圖片，這將是新聞文章縮略圖。當用戶將他們的鼠標移動到我希望突出顯示的圖像之一上時。我通過在圖像上放置相同大小的div來完成此操作。然後我嘗試使用JQuery在鼠標輸入中添加一個類到該div，這將使它成爲一個稍微透明的藍色框，如here所示。鼠標高亮顯示的圖像輸入

HTML：

<div class="col-5 parent-center"> 
    <div id="news1" class="news-highlight"></div> 
    <img src="images/news.jpg" class="news-image"/> 
</div>

我知道，在我的JQuery使用。內容作爲參考，發現新聞圖片的ID快。這確實存在我只是沒有在那麼遠了代碼複製，因爲它會導致大量的代碼無關的我的問題在被粘貼

CSS：

.news-image 
{ 
    height: 100%; 
    width: 90%; 
    border: solid 2px #14a0dc; 
} 

.news-highlight 
{ 
    height: 100%; 
    width: 90%; 
    position: absolute; 
    background-color: #14a0dc; 
    opacity: 0.6; 
}

JQuery的：

function highlightNews(newsDiv) 
{ 
    newsDiv.addClass('news-highlight'); 
} 

function unhighlightNews(newsDiv) 
{ 
    newsDiv.removeClass('news-highlight'); 
} 

$(document).ready(function() 
{ 
    var $content = $('.content'); 
    var $news1 = $content.find('#news-1'); 
    var $news2 = $content.find('#news-2'); 
    var $news3 = $content.find('#news-3'); 
    var $news4 = $content.find('#news-4'); 

    function newsMouse(newsDiv) 
    { 
     newsDiv.on('mouseenter', highlightNews(newsDiv)).on('mouseleave', unhighlightNews(newsDiv)); 
    } 

    newsMouse($news1); 
    newsMouse($news2); 
    newsMouse($news3); 
    newsMouse($news4); 
});

現在你可能在看到我的JQuery後哭了，我試圖在飛行中學習它，所以我真的不知道我在做什麼。

在此先感謝:)

來源

2016-01-05 James Burton

你不需要那個jQuery庫。您可以使用純粹簡單的CSS解決方案來解決此問題。試用CSS中的'：hover'選擇器。 –

如果我明白你想要的是什麼，你應該只需要改變圖像上方的div的顏色。這可以通過CSS輕鬆完成。這應該工作：

.news-highlight 
{ 
    background: rgba(51, 153, 255, 0); 
} 

.news-highlight:hover 
{ 
    background: rgba(51, 153, 255, 0.5); 
}

這將給DIV半透明的藍色，當用戶在其上懸停光標，圖像會顯示出來。

您也可以同時將圖像更改爲灰度，這可能會提高效果。

編輯：我應該還指出，需要在您的HTML的順序改成這樣：

<div class="col-5 parent-center"> 
    <img src="images/news.jpg" class="news-image"/> 
    <div id="news1" class="news-highlight"></div> 
</div>

現在。news-highlight div會出現在你的img頂部。

來源

2016-01-05 15:44:34 Th4n0s

像這樣的純粹的CSS解決方案應該優先於涉及Javascript或jQuery的解決方案。 –

爲什麼不使用純CSS而不使用js？

.news-image 
 
{ 
 
    height: 100%; 
 
    width: 90%; 
 
    border: solid 2px #14a0dc; 
 
} 
 

 
.news-image:hover 
 
{ 
 
    height: 100%; 
 
    width: 90%; 
 
    position: absolute; 
 
    background-color: #14a0dc; 
 
    opacity: 0.6; 
 
}

<div class="col-5 parent-center"> 
 
    <div id="news1" class="news-highlight"></div> 
 
    <img src="images/news.jpg" class="news-image"/> 
 
</div>

來源

2016-01-05 13:21:48

感謝您指出這一點，我認爲使用這種方法，只要有人徘徊但顯然不是，它會突出顯示所有人。當我使用此解決方案時，顏色不會改變，是因爲我正在將該類應用於？如果沒有辦法做到這一點，那麼我想我可以在它下面用我想要的顏色放置一個div，這樣它可以透過不透明度爲0.6時的情況。 –

，你可以做到這一點使用純CSS。基本上凸顯不過box-shadow或border上懸停。

.news-image:hover{ 
    border:solid 1px red; 
}

來源

2016-01-05 13:23:51 Siddharth

爲什麼'border：solid 1px red;'？ –

只是例如隊友或說我喜歡紅色。 – Siddharth

這是jsFiddle懸停效果如何工作。實踐就是答案！ jQuery的不需要的東西，這個簡單的

.news-image 
{ 
    height: 100%; 
    width: 90%; 
    border: solid 2px #14a0dc; 
} 

.news-image:hover 
{ 
    height: 100%; 
    width: 90%; 
    position: absolute; 
    background-color: #14a0dc; 
    opacity: 0.6; 
}

來源

2016-01-05 13:30:47 kloshar4o

如果你想使用JQuery的做這樣的事情，一個選擇是使用hover和toggleClass

$('.news-image img').hover(function() { 
 
    $(this).toggleClass('news-highlight'); 
 
});

.news-image { 
 
    float: left; 
 
    width: 33.3%; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 

 
.news-image img{ 
 
    transition: all 0.3s ease-in; 
 
    width: 100%; 
 
} 
 

 
.news-highlight { 
 
    opacity: 0.6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="news-image"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div> 
 

 
<div class="news-image"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div> 
 

 
<div class="news-image"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

來源

2016-01-05 13:48:04

鼠標高亮顯示的圖像輸入

回答

相關問題