使用CSS

文本亮化形象，我們使用這個CSS使用CSS

.event_box > a img{ 
    width: 100%; 
    filter: brightness(70%); 
    display: block; 
    -webkit-transition: all 0.7s linear; 
    -moz-transition: all 0.7s linear; 
    -ms-transition: all 0.7s linear; 
    -o-transition: all 0.7s linear; 
    transition: all 0.7s linear; 
} 
.event_box >a:hover img:hover{ 
    filter:brightness(100%) 
} 

.event_box .text-picture 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    color: #fff; 
    height: 0; 
    text-align: center; 
    font-family: Open Sans Semibold; 
    font-size: 26px; 
    font-weight: bold; 
    color: #fff; 
    text-transform: uppercase; 
    z-index: 999; 
}

結合這個網站：

<div class="row"> 
        <div class="event_box"> 
        <a href="'.$templink.$langlink.$paginalink.'portfolio'.$caselink.'1000-wishes"> 
        <img src="'.$url.'images/home/1000-wishes.jpg" alt="1000 Wishes"/> 
         <div class="text-picture"> 
         1000 Wishes 
         </div> 
        </a> 
        </div> 
       </div>

你會看到關於該圖片的文字圖片。鼠標懸停效果一直運行，直到鼠標指針碰到文本，然後鼠標懸停效果停止。有沒有解決這個問題的辦法？

.event_box > a img{ 
 
    width: 100%; 
 
    filter: brightness(70%); 
 
    display: block; 
 
    -webkit-transition: all 0.7s linear; 
 
    -moz-transition: all 0.7s linear; 
 
    -ms-transition: all 0.7s linear; 
 
    -o-transition: all 0.7s linear; 
 
    transition: all 0.7s linear; 
 
} 
 
.event_box >a:hover img:hover{ 
 
    filter:brightness(100%) 
 
} 
 

 
.event_box .text-picture 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    color: #fff; 
 
    height: 0; 
 
    text-align: center; 
 
    font-family: Open Sans Semibold; 
 
    font-size: 26px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    z-index: 999; 
 
}

<div class="row"> 
 
        <div class="event_box"> 
 
        <a href="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg"> 
 
        <img src="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg" alt="1000 Wishes"> 
 
         <div class="text-picture"> 
 
         1000 Wishes 
 
         </div> 
 
        </a> 
 
        </div> 
 
       </div>

來源

2017-02-27 Coolen

是否有任何機會，以更新的代碼片斷的問題？ – ymz

我從來沒有這樣做過，我希望它能正常工作。 – Coolen

肯定。將pointer-events: none;添加到.text-picture CSS。

這是幹什麼讓鼠標事件（如懸停，點擊等）通過元素。通過這樣做，圖像的「懸停」狀態不會中斷，因此它會保持亮度。

.event_box > a img{ 
 
    width: 100%; 
 
    filter: brightness(70%); 
 
    display: block; 
 
    -webkit-transition: all 0.7s linear; 
 
    -moz-transition: all 0.7s linear; 
 
    -ms-transition: all 0.7s linear; 
 
    -o-transition: all 0.7s linear; 
 
    transition: all 0.7s linear; 
 
} 
 
.event_box >a:hover img:hover{ 
 
    filter:brightness(100%) 
 
} 
 

 
.event_box .text-picture 
 
{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    color: #fff; 
 
    height: 0; 
 
    text-align: center; 
 
    font-family: Open Sans Semibold; 
 
    font-size: 26px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    z-index: 999; 
 
    pointer-events: none; 
 
}

<div class="row"> 
 
        <div class="event_box"> 
 
        <a href="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg"> 
 
        <img src="http://www.jcsl.nl/clean/images/home/1000-wishes.jpg" alt="1000 Wishes"> 
 
         <div class="text-picture"> 
 
         1000 Wishes 
 
         </div> 
 
        </a> 
 
        </div> 
 
       </div>

來源

2017-02-27 22:06:06 Santi

非常感謝，我從未見過這個選項。甚至Notepad ++也不會對此進行修改。 – Coolen

沒問題。 [指針事件]（https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events）通常與SVG圖像結合使用，但將其設置爲「none」將適用於所有元素類型。它有點新，但在所有現代瀏覽器以及IE11 +中都得到了認可。如果您正在尋找可在IE11之前運行的解決方案，我可以看到有哪些可用的解決方案。 – Santi

添加指針事件沒有任何的文字圖片類

.event_box .text-picture 
{ 
    //this line 
    pointer-events:none; 
    ---- 

    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    color: #fff; 
    height: 0; 
    text-align: center; 
    font-family: Open Sans Semibold; 
    font-size: 26px; 
    font-weight: bold; 
    color: #fff; 
    text-transform: uppercase; 
    z-index: 0; 
}

來源

2017-02-27 22:10:22 Nicholas

回答

相關問題