Question

我有一个带有少量标签的div .div具有圆形形状，但是当鼠标结束时。它转换为一个正方形，你可以看到一些信息（基本上是标签和按钮）代码是这样的：

class PostAdapter extends BaseAdapter {

private final Random rand = new Random();
private final int ID = rand.nextInt(Integer.MAX_VALUE);

private final Context context;
private List<Post> posts = new ArrayList<>();

public PostAdapter(Context context, List<Post> posts) {
    this.context = context;
    this.posts = posts;
}

@Override
public int getCount() {
    return (posts != null) ? posts.size() :0;
}

@Override
public Post getItem(int pos) {
    return (posts != null && pos < posts.size() && pos >= 0) ? posts.get(pos) : null;
}

@Override
public long getItemId(int pos) {
    return ID + pos;
}

@Override
public View getView(int pos, View view, ViewGroup viewGroup) {
    ViewHolder holder;

    if (view == null) {
        view = LayoutInflater.from(context).inflate(R.layout.lv_redditposts, viewGroup, false);
        holder = new ViewHolder(view);
        view.setTag(holder);
    } else {
        holder = (ViewHolder) view.getTag();
    }

    Post post = getItem(pos);
    holder.postTitle.setText(post.getmTitle());
    holder.postAuthor.setText(post.getmAuthor());

    return view;
}

// ViewHolder
static class ViewHolder {
    public final TextView postTitle;
    public final TextView postAuthor;

    public ViewHolder(View v){
        postTitle = (TextView) v.findViewById(R.id.postTitleTextView);
        postAuthor = (TextView) v.findViewById(R.id.postAuthorTextView);
    }
} // End ViewHolder

并且css代码是这样的：

 <div id="UserIconCircle">
                <i class="fa fa-user-md fa-2x" id="UserIconTop"></i>

             <asp:Label ID="FirstName" runat="server" Text="Dikush"></asp:Label>
             <asp:Label ID="LastName" runat="server" Text="Dikushi"></asp:Label>

             <asp:Label ID="UnderName" runat="server" Text="First Name"></asp:Label>
             <asp:Label ID="UnderLastName" runat="server" Text="Last Name"></asp:Label>
 </div>

当鼠标结束时，它看起来像这样：

什么时候不是这样：

当鼠标没有超过div时，标签仍然可见。

我试图通过在div处添加#UserIconCircle { position: absolute; top: 120px; left: 10px; width: 35px; height: 35px; border: 4px solid #373e4a; border-radius: 50px; -webkit-transition-property: width, height; /* Safari */ -webkit-transition-duration: 3s; /* Safari */ transition-property: width, height; transition-duration: 0.4s; z-index: 4; } #UserIconCircle:hover { width: 240px; height: 260px; background-color: #373e4a; border-radius:4px; border-top-left-radius: 20px; z-index: 4; }并尝试放置runnat="server"来制作ac＃代码，但无法弄清楚如何进行鼠标悬停并在page.aspx.cs中调用它。

有什么建议吗？还有其他办法吗？

Answer 1

在客户端处理此问题，获取Javascript以使标签显示/消失。

实现这一目标的方法很少。

使用Javascript。所以在.aspx文件中

<div id="UserIconCircle">
    <script>
      function makeMeVisible()
      {
        document.getElementById("FirstName").visible = false;
      }
    </script>
    <i class="fa fa-user-md fa-2x" id="UserIconTop"></i>
    <asp:Label ID="FirstName" runat="server" Text="Dikush" onmouseover="makeMeVisible();"></asp:Label>
    <asp:Label ID="LastName" runat="server" Text="Dikushi"></asp:Label>
</div>

在服务器端代码中，您可以使用ClientScriptManager.RegisterClientScriptBlock使用Page对象注册客户端脚本

希望这有帮助

Answer 2

如果您将overflow: hidden;添加到#UserIconCircle样式，则内容将不可见。有关详细信息，请参阅http://www.w3schools.com/cssref/pr_pos_overflow.asp。

只有当鼠标在asp.net C中的div上时，如何制作标签和按钮＃

2 个答案: