代码之家  ›  专栏  ›  技术社区  ›  harunB10

更改图中的文本和图像不透明度

  •  1
  • harunB10  · 技术社区  · 6 年前

    我有一个图标和文字的数字。单击时,它们都应该重定向到某个页面。 另外,我想改变不透明度的图像和文字时,你在他们悬停。

    这是我更改不透明度的代码:

    $(document).ready(function() {
        $("#buyText").hover(function() {
            $('#buy').css('opacity', 0.75);
            $("#buyText").css('opacity', 0.75);
        }, function() {
            $('#buy').css('opacity', 1);
            $("#buyText").css('opacity', 1);
        });
    });
    
        $(document).ready(function() {
            $("#buy").hover(function() {
                $('#buy').css('opacity', 0.75);
                $("#buyText").css('opacity', 0.75);
            }, function() {
                $('#buy').css('opacity', 1);
                $("#buyText").css('opacity', 1);
            });
        });
    

    我以小提琴为例:

    https://jsfiddle.net/Lk9af87t/

    如果你从左侧接近文本,比如说,文本的不透明度会改变,但图像保持不变。我如何确保它们同时更改不透明度(悬停时)。

    4 回复  |  直到 6 年前
        1
  •  3
  •   Rory McCrossan Hsm Sharique Hasan    6 年前

    问题是因为 #buy #buyText 元素大小不同,因此 mouseenter 事件将在不同的时间发生。如果希望同时影响两个元素,请改用父元素,例如 a .

    a.buy-link:hover #buy,
    a.buy-link:hover #buyText {
      opacity: 0.75;
    }
    

    a.buy-link:hover #buy,
    a.buy-link:hover #buyText {
      opacity: 0.75;
    }
    
    a {
      text-decoration: none;
    }
    
    a:link,
    a:visited,
    a:active {
      color: rgb(0, 151, 224);
      text-decoration: none;
    }
    
    a:hover {
      color: rgb(84, 195, 241);
    }
    <div class="col text-center">
      <a href="#" style="text-decoration: none" class="buy-link">
        <figure>
          <img id="buy" src="https://banner2.kisspng.com/20180418/ixe/kisspng-agar-io-computer-icons-ubuntu-skin-buy-5ad7236a419759.6594585115240487462687.jpg" style="width: 100px; height: 100px">
          <figcaption id="buyText" style="margin-top: 10px"><b>BUY</b></figcaption>
        </figure>
      </a>
    </div>
        2
  •  0
  •   Bhumi Patel    6 年前

    请使用此css代码

    .text-center a {margin: 20px;display: block;}
    .text-center figure {margin: 0;}
    
        3
  •  0
  •   Fabrizio Calderan    6 年前

    这是由于CSS

    a:hover {
        color: rgb(84, 195, 241);
        text-decoration: none;
    }
    

    链接元素的面积大于图形(默认情况下,该图形应用了边距)。实际上改变的不是不透明度而是颜色

    enter image description here

    因此,要么删除悬停时的规则,要么删除应用于 figure 要素


    作为补充,我建议不要使用JS来完成这种任务。你只能通过CSS应用同样的效果。

        4
  •  0
  •   Szymon Å»akiewicz    6 年前

    另外,如果您希望避免使用JQuery并使用仅限CSS的解决方案,请将CSS更改为:

    * {
      margin: 0;
      padding: 0;
    }
    
    a {
      display: inline-block;
    }
    
    /* unvisited link */
    a:link {
        color: rgb(0, 151, 224);
        text-decoration: none;
    }
    
    /* visited link */
    a:visited {
        color: rgb(0, 151, 224);
        text-decoration: none;
    }
    
    /* mouse over link */
    a:hover {
        color: rgb(84, 195, 241);
        text-decoration: none;
        opacity: 0.75
    }
    
    /* selected link */
    a:active {
        color: rgb(0, 151, 224);
        text-decoration: none;
    }