我有一個在懸停時顯示文本的供稿閱讀器。在盤旋之前，會出現一些文字陰影，使陰影可見。不需要的文本陰影顯示文本預先懸停
http://codepen.io/Teeke/pen/JWqpoP
a{
color: inherit;
text-decoration: none;
}
我試着從
'color: inherit'
透明，或RGBA（0,0,0,0）改變線109在CSS，但將盡一切文字消失。
我該如何解決這個CSS衝突？
所以，基本上你需要做的最初設置的文本陰影的顏色透明的。然後，當它懸停時，您可以將文字陰影的顏色更改爲任何您想要的。以下是對這種效果看起來像文字是已經可以看到一個例子：
h1 {
color: red;
text-shadow: 1px 1px 3px transparent;
}
h1:hover {
text-shadow: 1px 1px 3px #333;
}<h1>Hello world</h1>希望幫助！
你不想你的字體更改爲transparent褪色這樣的元素。除了僅僅是一個糟糕的習慣和痛苦的工作，它不是高性能的。剛剛褪去從opacity: 0整個.bar和.overlay到opacity: 1懸停
var Settings = {
subreddit : 'PositiveTechnology',
after: 'o',
limit: 25
}
let d = new Date; document.getElementById("date").innerHTML = d.toUTCString();;
let $grid = $('#positive-technology')
.attr('data-loading-text','')
.packery({ itemSelector: '.item' })
.on('click','.overlay', function(){
$(this).parent().toggleClass('active').parent().packery('layout');
});
function RedditJSON(){
this.loadLink = function(){
Settings.isLoading = true;
return 'https://www.reddit.com/r/' + Settings.subreddit + '/.json?after=' + Settings.after + '&limit=' + Settings.limit;
}
this.next = function(feed){
if (Settings.theLast) return;
if (feed.data.after == null) Settings.theLast = true;
let posts = feed.data.children;
for(let i = 0; i < posts.length; i++){
if(true){ // posts[i].data.post_hint == 'image' || posts[i].data.url.search('imgur')
if(!posts[i].data.hasOwnProperty('preview')) continue;
let image = posts[i].data.preview.images[0];
let permalink = 'https://reddit.com' + posts[i].data.permalink;
let elem = $('<div>').addClass('item').css('background-image', 'url(' + image.source.url + ')');
let overlay = $('<a>').addClass('overlay').appendTo(elem);
let bar = $('<div>').addClass('bar').appendTo(elem);
let link = $('<a>').addClass('post').attr({target: '_blank', href: permalink}).appendTo(bar).text(posts[i].data.title);
let zoom = $('<a>').addClass('zoom').attr({target: '_blank', href: image.source.url}).appendTo(bar).html('<i class="fa fa-camera-retro"></i>');
if (posts[i].data.stickied){
elem.addClass('stickied');
}
// if (image.source.width > image.source.height){
// elem.addClass('wide');
// }
// if(posts[i].data.created % 6 == 0){
// elem.addClass('active');
// }
$grid.append(elem).packery('appended', elem).packery('layout');
}
}
Settings.after = feed.data.after;
Settings.isLoading = false;
}
}
var bob = new RedditJSON();
function loadNext(){
if (Settings.isLoading){
setTimeout(loadNext,100);
return;
} else {
$.getJSON(bob.loadLink(), bob.next);
}
}
$(function() {
// return;
loadNext();
$(window).scroll(function() {
console.log($(window).scrollTop() + ' ' + ($('body').height() - $(window).height() - 10));
if ($(window).scrollTop() >= $('body').height() - $(window).height() - 10 && !Settings.isLoading) {
loadNext();
}
});
});/* https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ */
@import url("http://fonts.googleapis.com/css?family=Raleway:200,300, 800");
* {
box-sizing: border-box;
}
body {
margin-top: 100px;
padding: 0;
background: #181818;
font-family: 'Raleway', sans-serif;
color: rgba(250, 250, 250, 0.8);
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/577362/pexels-photo%20(4).jpg");
background-size: 100% 90%;
background-repeat: no-repeat;
text-shadow: 2px 2px 2px rgba(100, 100, 120, 0.8);
}
.base-title {
font-weight: 200;
font-size: 85px;
/* ORIG 70px */
}
h1 {
text-align: center;
font-weight: lighter;
}
h4 {
text-align: center;
font-weight: 300;
margin-top: -10%;
font-size: 20px;
}
#date {
text-align: center;
margin-bottom: 10%;
}
.ticker {
margin-top: 7%;
}
.grid {
width: 100%;
max-width: 1200px;
margin: auto;
position: relative;
}
.grid::after {
display: block;
content: attr(data-loading-text);
text-align: center;
width: 100%;
padding: 20px 0;
position: absolute;
top: 100%;
}
.grid .item {
position: relative;
display: block;
width: 200px;
height: 200px;
background-size: cover;
background-position: center center;
cursor: pointer;
overflow: hidden;
color: white;
text-align: center;
padding: 5px;
border-radius: 2px;
margin-left: 30px;
margin-bottom: 30px;
box-shadow: inset 0 0 10px #000000;
-webkit-filter: saturate(1.5) contrast(107%);
text-shadow: 2px 2px 2px #222;
}
.grid .item.wide {
width: 25%;
}
.grid .item.active {
width: 25%;
height: 600px;
}
.grid .item.wide.active {
width: 100%;
height: 650px;
}
.grid .item .bar {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0 4px;
z-index: 4;
color: white;
}
.grid .item .bar a {
text-decoration: none;
font-size: 22px;
font-weight: bold;
}
.grid .item .bar a.zoom {
float: right;
}
.grid .item .overlay {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, #001, transparent 100px);
z-index: 3;
}
.grid .item .bar, .grid .item .overlay {
transition: transform 250ms, opacity 250ms;
transform: translateY(80px);
opacity: 0;
}
.grid .item:hover .bar, .grid .item:hover .overlay {
transform: translateY(0);
opacity: 1;
}
.grid .item.stickied .overlay {
background: linear-gradient(to top, #0f0, transparent 80px);
}
@media (max-width: 520px) {
.grid .item {
width: 100% !important;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/packery.pkgd.js"></script>
<h1 class="base-title">Positive Technology</h1>
<!-- <h4>Useful News</h4> -->
<h1 class="ticker"> · Hydroponics · Aeroponics · Micro-solar · Micro-wind · 3D-Printing · Eco-Houses · Water Filtration ·</h1>
<div class="grid" id="positive-technology"></div>
<h2 id="date"></h2>它看起來像做此更改SCSS代碼：
&:hover{
.bar, .overlay{
transform: translateY(0);
color: inherit;
text-shadow: 2px 2px 2px #222;
}
以及除去的text-shadow.item選擇器也有效。
我從這裏大家的回答一些有趣的技巧，但是我去了最簡單的途徑。我在CSS的正文部分有一些代碼：
text-shadow: 2px 2px 2px rgba(100,100,120,0.8);
影響整個頁面中的所有文本。我將它從身體上取下並根據需要插入每個單獨的選擇器中。
你需要做這樣的事情嗎？ http://codepen.io/anon/pen/BWeYQm –
沒問題基督教徒，但把陰影完全帶走，使得文字在懸停時很難閱讀。懸停時需要存在陰影，並且不可見的預懸停。必須是一些相沖突的課程，但我不知道在哪裏。 – RubyRube
「.item」類選擇器中第83行的「text-shadow」是導致它的原因。也許你可以將它移到懸停狀態？ –