Question

我有一个饲料阅读器，可以在悬停时显示文字。在悬停之前，会出现一些文本阴影，使阴影可见。

 a{
        color: inherit;
        text-decoration: none;
   }

我尝试过更改CSS中的第109行

'color: inherit'

透明，或rgba（0,0,0,0），但这会使所有文字消失。

如何修复此CSS冲突？

Answer 1

因此，基本上您需要做的是将文本阴影的颜色设置为透明。然后，当它悬停在上面时，您可以将文本阴影的颜色更改为您想要的任何颜色。以下是此效果在已经显示的文字上的效果示例：

＆＃13;

h1 {
  color: red;
  text-shadow: 1px 1px 3px transparent;
}

h1:hover {
  text-shadow: 1px 1px 3px #333;
}

＆＃13;

<h1>Hello world</h1>

＆＃13;

希望有所帮助！

Answer 2

看起来对SCSS代码进行了此更改：

&:hover{
  .bar, .overlay{
    transform: translateY(0);
    color: inherit;
    text-shadow: 2px 2px 2px #222;
  }

并从text-shadow选择器中删除.item也可以。

Answer 3

您不希望将字体更改为transparent以淡化此类元素。除了只是一个糟糕的练习和屁股的痛苦，它不是高性能。只需在悬停时将整个.bar和.overlay从opacity: 0淡化为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/packery@2/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>

Answer 4

我从每个人的答案中得到了一些有趣的提示，但我走的是最简单的路线。我在CSS的正文部分有一些代码：

text-shadow: 2px 2px 2px rgba(100,100,120,0.8);

影响整个页面的所有文本。我将它从身体中移除并根据需要将其插入每个单独的选择器中。

显示文本预悬停的不需要的文本阴影

4 个答案: