Question

主题是说 - 我的问题是：

当我将鼠标悬停在我的照片上时，我希望有一个颜色叠加
图像上的文字应该在悬停之前和之后可见而不做任何更改
问题：当我将鼠标悬停在文本上方时，颜色悬停叠加层消失（当我在Div中移动而不将其移动到文本上时，它就会显示）
我尝试了其他一些解决方案，比如伪类，但我没有让它工作......谢谢你们！

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

  .text_z{
            color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
            z-index: 999;
        }
        
        
        .image_box_one img {
            width: 100%;
            display: block;
            height: auto;

        }
        
        .image_box_one {
             background: rgba(29, 106, 154, 0.72);
            padding:0px;
            margin:0px;
        }
      
         
        .image_box_one img:hover {
            opacity: 0.5;
        }

   <div class="container">
          <div class="row">
               <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
    </div>             
  </div>

Answer 1

当您将鼠标悬停在文字上时，您不再悬停.image_box_one:hover img。将您的选择器更改为.image_box_one，以便当您将鼠标悬停在img中的任何内容时，它会将样式应用于@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .text_z{ color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index: 999; } .image_box_one img { width: 100%; display: block; height: auto; } .image_box_one { background: rgba(29, 106, 154, 0.72); padding:0px; margin:0px; } .image_box_one:hover img { opacity: 0.5; }

＆＃13;

   <div class="container">
          <div class="row">
               <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
    </div>             
  </div>

＆＃13;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;

namespace WebApplication4
{
    public partial class WebForm15 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsCallback)
            {
                //credit to https://stackoverflow.com/questions/44076955/adding-additional-textboxes-to-aspx-based-on-xml#comment75336978_44078684
                const string xml = @"<Number>
                       <Num>1</Num>
                       <Num>2</Num>
                       <Num>3</Num>
                     </Number>";

                XDocument doc = XDocument.Parse(xml);
                int i = 0;

                foreach (XElement num in doc.Root.Elements())
                {
                    TextBox box = new TextBox
                    {
                        ID = "dynamicTextBox" + i,
                        Text = num.Value,
                        ReadOnly = false
                    };
                    divToAddTo.Controls.Add(box);

                    divToAddTo.Controls.Add(new LiteralControl("<br/>"));

                    i++;
                }
            }
        }

        protected void BtnGetValues_Click(object sender, EventArgs e)
        {
            IList<string> valueReturnArray = new List<string>();
            foreach (Control d in divToAddTo.Controls)
            {
                if (d is TextBox)
                {
                    valueReturnArray.Add(((TextBox)d).Text);
                }
            }
            //valueReturnArray will now contain the values of all the textboxes
        }
    }
}

＆＃13;

将鼠标悬停在文本

1 个答案: